小程序的条件渲染与列表渲染

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

条件渲染

关于 wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<view wx:if="{{condition}}"> 根据判断条件condition，显示view </view>

也可以使用属性 wx:elif 和属性 wx:else 来添加 else 判断

<view wx:if="{{type === 1}}"> 选项一 </view>
<view wx:elif="{{type === 2}}"> 选项二 </view>
<view wx:else> 其他 </view>

结合 < blcok> 使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block> 标签将多个组件包装起来，并在 <blcok> 标签上使用 控制属性 wx:if

<blcok> 标签并不是一个组件，它只是一个具有包裹性质的容器，不会在页面中做出任何渲染，只接受控制属性

<block wx:if="{{flase}}">
    <view> view1 </view>
    <view> view2 </view>
    <view> view3 </view>
</block>

关于 hidden

在小程序中，直接使用 hidden="{{condition}}" 控制元素显示与隐藏

<view hidden="{{flag}}"> 条件为 true 的时候，隐藏元素，条件为 flase，显示元素 </view>

关于 wx:if 与 hidden 的对比

• 运行方式不同
  • wx:if 它是以动态 创建 和 移除 元素的方式，控制元素的展示与隐藏
  • hidden 是以切换样式的方式（display：none/block;），控制元素的显示与隐藏
• 使用建议

  • 频繁切换时，建议使用 hidden

  • 如果在运行时条件比较复杂，则建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

关于调试

在调试过程中，我们可以通过控制台的 APPData 选项，去调试不 bool 值对应的效果

---

列表渲染

关于 wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件解构，语法如下：

页面数据：

Page({
    data: {
        array:["苹果","华为","小米"]
    },
})

页面结构：

<view wx:for="{{array}}">
    索引是:{{index}} 当前项是：{{item}}
</view>

默认情况下，当前循环项的索引用 index 表示，当前循环项用 item 表示

关于 wx:key

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表指定唯一的 key 值，从而提高渲染效率

页面数据：

Page({
    data: {
        array:[
            {id:1,name:"苹果"},
            {id:2,name:"华为"},
            {id:3,name:"小米"}
        ]
    },
})

页面结构：

<view wx:for="{{array}}" wx:key="id">
    索引是:{{index}} 当前项是：{{item.name}}
</view>