小程序01/ 小程序 模板语法—条件渲染方式、小程序 模板语法-列表循环渲染方式

模板语法—条件渲染方式

1.wx:if

语法: 

单分支:  wx:if=" 条件 "

双分支:  wx:else

多分支:  wx:elif=" 条件 "

作用: 根据条件渲染 如果条件不满足 则该元素不会添加到DOM数

注意: wx:else前面必须要有 wx:if 或 wx:elif

2.hidden

语法: hidden="{{data变量 值:布尔值 }}"

作用: 控制css元素样式  display:none;

应用场景: 频繁切换显示隐藏

注意: 条件为true: 设置display属性为 block 条件为false: 设置元素 display属性为 none

模板语法-列表循环渲染方式

1.wx:for

语法:

wx:for="{{ data内数组名 }}" 

wx:key="id / *this"

wx:for-item="item新名"

wx:for-index="item新名"

作用: 循环渲染元素

注意: 

1.*item 表示循环中 item 本身 

2. id ,Vue中写法为 item.id ,小程序中只能写 id 

说明: 

1. wx:for指令写在那个标签身上 就代表重复生成那个标签

2. wx:key : 有id时写id ， 没有就写 *this