WXML模板语法-条件渲染和列表渲染

本文主要是介绍WXML模板语法-条件渲染和列表渲染，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、条件渲染

1.wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加else判断

// pages/list/list.js
Page({data: {type:1}
})

<!--pages/list/list.wxml--><view wx:if="{{type === 1}}"> True </view>
<view wx:elif="{{type === 2}}"> False </view>
<view wx:else> 0 </view>

2.结合<block>使用wx:if

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

<!--pages/list/list.wxml--><block wx:if="{{type === 1}}"><view> view1 </view><view> view2 </view>
</block>

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

3.hidden

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

// pages/list/list.js
Page({data: {flag:true}
})

<!--pages/list/list.wxml-->
<view hidden="{{flag}}"> 条件为true的时候隐藏元素，否则显示</view>

4.wx:if和hidden对比

（1）运行方式不同

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

hidden 以切换样式的方式(display:none/block)，控制元素的显示与隐藏

（2）使用建议：

频繁切换时，使用hidden

控制条件复杂时，使用wx:if

二、列表渲染

1.wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构

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

// pages/list/list.js
Page({data: {arr1:[1,2,3,4,5]}
})

<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}">索引是:{{index}},item项是:{{item}}
</view>

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

(在实际开发中用到的不多)

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

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

<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">索引是:{{idx}},item项是:{{itemName}}
</view>

3.wx:key 的使用

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

// pages/list/list.js
Page({data: {userList:[{id:1,name:'小红'},{id:2,name:'小明'},{id:3,name:'小白'},]}
})

<!--pages/list/list.wxml-->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

注意在指定key的时候，外面不用包Mustache语法，直接将对应的key值填充过来即可

这篇关于WXML模板语法-条件渲染和列表渲染的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---