WXML 模板语法 - 条件渲染
🍊1. wx:if
在小程序中，使用 wx:if="{{ condition }}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}">ture</view>
也可以用 wx:elif 和 wx:else 来添加 else 判断：
<view wx:if="{{type==1}}">type==1</view> <view wx:elif="{{type==2}}">type==2</view> <view wx:else>type==3</view>
js：
Page({ data: { type:1 }, })
因为type的值为1，所以：
例如：
WXML:
<view wx:if="{{type==1}}">主色调</view> <view wx:elif="{{type==2}}">普通按钮</view> <view wx:else>无</view> <button type="primary" size="mini" wx:if="{{type==1}}">主色调</button> <button size="mini" wx:if="{{type==2}}">普通按钮</button>
JS和上面的一样
效果：
🍋2. 结合 使用 wx:if
如果要 一次性控制多个组件的展示与隐藏 ，可以使用一个 标签将多
个组件包装起来，并在 标签上使用 wx:if 控制属性，示例如下：
<block wx:if="{{true}}"> <view>view1</view> <view>view2</view> <view>view3</view> </block>
注意： 并不是一个组件 ，它只是一个包裹性质的容器， 不会在页面中做任何渲染。
🍉3. hidden
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：
<view hidden="{{false}}">hidden</view>
hidden 中 false 表示不隐藏组件
true表示隐藏组件
🍓4. wx:if 与 hidden 的对比
① 运行方式不同
wx:if 以 动态创建和移除元素 的方式，控制元素的展示与隐藏
hidden 以 切换样式 的方式（display: none/block;），控制元素的显示与隐藏
② 使用建议
频繁切换 时，建议使用 hidden
控制条件复杂 时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
WXML 模板语法 - 列表渲染
🥭1. wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
<view wx:for="{{arry}}"> 索引是：{{index}},item项是:{{item}} </view>
JS:
Page({ data: { arry:['橘子','苹果','香蕉'] } })
默认情况下，当前循环项的 索引 用 index 表示； 当前循环项 用 item 表示。
效果：
🍍2. 手动指定索引和当前项的变量名
使用 wx:for-index 可以指定 当前循环项的索引 的变量名
使用 wx:for-item 可以指定 当前项 的变量名
示例代码如下：
🥝3. wx:key 的使用
类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表
项指定唯一的 key 值， 从而 提高渲染的效率 ，示例代码如下：
<view wx:for="{{userList}}" wx:key="id"> {{item.name}} </view>
JS:
Page({ data: { userList:[ {id:1,name:'热'}, {id:2,name:'爱'}, {id:3,name:'编'}, {id:4,name:'程'}, {id:5,name:'的'}, {id:6,name:'小'}, {id:7,name:'白'}, {id:8,name:'白'}, ] } })
效果：
