1.列表渲染
1.1wx:for
1.2wx:key
2.条件渲染
2.1wx:if
2.2 hidden
正文
WXML全称：wexin markup language,微信标签语言，可以理解为web中的html，今天来讲一下列表渲染，通过几个小案例掌握基本的使用，以下均以index页面进行讲解。
1.列表渲染
1.1wx:for
uniapp中使用wx:for进行列表渲染数据展示，其中默认索引形参为index，索引对应的值的形参默认为item。现自定义数组，然后进行遍历渲染展示。
index.js：
Page({
data: {
arr:[1,2,3,4,5]
}
})
index.wxml:
<view wx:for="{{arr}}">索引index：{{index}}，值：{{item}}</view>
展示数据如下:
wx:for中的索引项和索引值的形参默认是index、item，是否可以进行自定义，答案是肯定的，现在自定义customIndex、customItem对默认的形参进行修改，需要借助对应的属性:wx:for-index、wx:for-item来实现。上面的数组列表遍历就就可以修改成如下:
index.wxml中:
<view wx:for="{{arr}}" wx:for-index="customIndex" wx:for-item="customItem">
索引index：{{customIndex}}，值：{{customItem}}</view>
展示效果同上：
1.2wx:key
上面的列表渲染实现之后，细心的同学可能会在控制台中看到如下警告信息：
警告的大概意思是需要使用wx:key提高列表渲染的性能,使用wx:key指定每项的唯一标识。至于wx:key的数值一般为列表中唯一的字段值。
上面的案例customIndex是每一项的唯一标识，所以可以指定wx:key的值为customIndex。修改后的index.wxml如下：
<view wx:for="{{arr}}" wx:for-index="customIndex" wx:for-item="customItem" wx:key="customIndex">
索引index：{{customIndex}}，值：{{customItem}}</view>
修改之后结果正常显示，控制台的警告信息也会消失。
2.条件渲染
2.1 wx:if
wx:if="{{条件表达式}}"，表达式成立则组件显示，不成立则组件不显示。一般也与wx:elif、wx:else进行多条件比较。下面用案例进行说明:
定义一个数字:num,如果是1则显示男,如果是2则显示女,其他的数显示未知。
index.js中:
Page({
data: {
num:1
}
})
index.wxml中:
<view wx:if="{{num == 1}}">等于1显示男</view>
<view wx:elif="{{num == 2}}">等于2显示女</view>
<view wx:else>其他显示未知</view>
显示结果如下:
为了方便调试，修改num值后观察效果，可以直接从appData中修改num值，这样就可以不用频繁修改index.js中num值进行保存了,处理方式如下：
2.2 wx:hidden
说到控制组件是否显示就不得不说一下hidden属性,hidden值为true时也回控制组件不显示。
index.js中：
Page({
data: {
showView: true
}
})
index.wxml中：
<view hidden="{{showView}}">是否展示view组件，true时隐藏，false时显示</view>
hidden属性控制组件是否显示是通过添加样式:display: none来实现。可以打开控制台选中组件看下具体的样式信息：
hidden与wx:if的区别在于前者是添加了样式:display: none,后者是重新创建或是删除对象实现的组件是否显示，从性能上来讲hidden性能更高,不过对于多重条件判断还是使用wx:if比较方便。
