文登建设局官方网站,酒店和网站对接如何做,wordpress 生成小程序,北京标识设计制作公司微信小程序中的条件渲染和列表渲染 1. 条件渲染1.1. 语法格式 (wx:if, wx:elif ,wx:else)1.2. block标记1.3. hidden属性1.4. wx:if 与 hidden 的对比 2. 列表渲染2.1. wx:for 语法格式 及 wx:key的使用 1. 条件渲染
1.1. 语法格式 (wx:if, wx:elif ,wx:else)
view wx:if… 微信小程序中的条件渲染和列表渲染 1. 条件渲染1.1. 语法格式 (wx:if, wx:elif ,wx:else)1.2. block标记1.3. hidden属性1.4. wx:if 与 hidden 的对比 2. 列表渲染2.1. wx:for 语法格式 及 wx:key的使用 1. 条件渲染
1.1. 语法格式 (wx:if, wx:elif ,wx:else)
view wx:if{{condition}}True/view当condition条件为true时代码块渲染显示为false时代码块不进行渲染.
可以结合 wx:elif“{{condition}}” 和 wx:else来进行判断
!-- type 为 当前页面的.js文件中的data的数据 --
view wx:if{{type1}}男/view
view wx:elif{{type2}}女/view
view wx:else保密/view1.2. block标记
可以使用block标记一次性的控制多个组件的显示与隐藏block标记本身并不进行渲染。 block并不是一个组件它只是一个包裹性质的容器不会再页面做任何渲染。
从下面的例子来观察下渲染出的页面结构有何特点
block wx:iftureview view1/viewview view2/view
/blockblock标签未曾渲染只是充当一个包裹性质的容器
1.3. hidden属性
学过前端三剑客的应该看到这个属性就明白了hidden是用来控制元素的显示与隐藏的。 在hidden属性上通过条件判断元素是否显示
view hidden{{condition}}}condition条件为真时隐藏为假时显示/viewhidden属性实际上是 displaynone的效果
说明如下
view hiddenture条件为真时隐藏为假时显示/view1.4. wx:if 与 hidden 的对比
运行方式不同 ● wx:if 以动态创建和移除元素的方式控制元素的展示与隐藏 ● hidden 以切换样式的方式display: none/block;控制元素的显示与隐藏使用建议 ● 频繁切换时建议使用 hidden ● 控制条件复杂时建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
2. 列表渲染
2.1. wx:for 语法格式 及 wx:key的使用
wx:for 就是用来遍历数组的,可以循环渲染重复的组件结构
默认wx:for的格式每一项的索引为index,每一项的项内容是item
view wx:for{{array}}索引{{index}} 当前项内容 {{item}}
/view自定义 wx:for中的索引和项 自定义wx:for中的项和索引使用wx:for-indexxxxx来指定索引名使用wx:for-itemxxxx来指定项名。
view wx:for{{array}} wx:for-indexidx wx:for-itemitm索引{{idx}} 当前项内容 {{itm}}
/viewwx:key的作用就是在列表渲染的过程中给当前列表项指定唯一的key值从而提高渲染的效率。 例如下面的例子 数据部分 list.js
data: {userList:[{id:0,name:张三},{id:1,name:李四},{id:2,name:王五},]
},页面渲染部分,list.wxml
view wx:for{{userList}} wx:keyid索引{{index}} 当前项内容 {{item.name}}
/view
