WXML模板语法-条件渲染

wx:if

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

<view wx:if="{{condition}}"> True </view>

也可以用wx:if 和 wx:else 来添加else判断：

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

结合使用wx:if

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

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view1 </view>
</block>

注意：并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

hidden

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

<view hidden="{{ condition }}">条件为true隐藏，条件为false显示<view>

wx:if与hidden的对比

①运行方式不同

1 wx:if 以 动态创建和移除元素 的方式，控制元素的展示与隐藏

2 hidden 以 切换样式 的方式（ display: none/block; ），控制元素的显示与隐藏

② 使用建议

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

2 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

WXML模板语法-列表渲染

wx:for

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

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

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

手动指定索引和当前项的变量名*

使用wx:for-index可以指定当前循环项的索引的变量名

使用wx:for-item可以指定当前项的变量名

示例代码如下：

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

wx:key的使用

类似于vue列表中的:key,小程序在实现列表渲染时，也建议渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

data: {
  userlist:[
    {id:1,name:"小红"},
    {id:2,name:'小黄'},
    {id:2,name:'小白'}
  ]
    }

<view wx:for="{{userlist}}" wx:key="id">{{item.name}}</view>

小结

其实通过学习WXML语法我感受到了小程序很多与vue的相似之处，但是在相似的同时，一些写法却又不同于vue，所以建议大家在深入学习小程序的同时，多去对比总结与vue的相似与不同之处，系统的做一个总结，这样的话相信在学习小程序的同时又对vue巩固了一遍！！！