WXML——数据绑定与数据渲染（4）

快捷键：shift+alt，鼠标下拉，然后shift+ctrl+键盘右箭头，可选中一块内容

快捷键：ctrl+/ 注释
数据绑定使用 Mustache 语法（双花括号）将变量包起来

1.标签

标签显示的内容位于俩个标签之间的空白部分，标签的属性位于标签内部

<text>  文本标签，行内元素，不会换行，除非有换行符
<view>  文本标签，块级元素，会换行，但块内不会换行，哪怕有换行符，相当于dis
<checkbox>复选框
<block>占位符标签，用于页面渲染，写代码时可以看见，小程序运行时会移除

1. 标签中属性的使用
<text data_num="{{num}}">自定义属性</text>
//组件属性(需要在双引号之内)
//num在js文件的data中定义，标签属性在调试器WXML中查看
2. bool类型充当属性(满足才显示，不满足文本内容不会显示)
<checkbox checked="{{ischeck}}"></checkbox>
<checkbox checked="{{false}}"></checkbox>
//字符串和花括号间一定不能多加括号，不然会识别失败
//控制属性(bool变量)需要在双引号之内
//关键字（true、false等）也需要在双引号之内

2.运算

在Mustache 语法花括号中只能加入表达式，而不能加入语句
表达式：简单的数字运算，字符串的拼接，逻辑运算，加减运算，字符串拼接，三元表达式
语句：if-else，switch，do-while，for等等

3.数据渲染

• 标签属性中的列表渲染有 wx:else, wx:for, wx:key
• 条件渲染有wx:if

列表渲染wx:for

• 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
• 格式：wx:for="{{数组}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引 wx:key="关键字"
• 格式：wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"

列表渲染wx:key

数组或对象中唯一关键值，用来提高列表渲染的性能

• wx:key==“唯一值”或wx:key==“*this”
• 若绑定的是一个字符串，这个字符串一定是循环数组中的唯一属性
• 若使用this，当循环项是一个普通数组，数组内容this可以直接作为循环项
• 当出现数组的嵌套循环，绑定的名称不要重名wx:for-item="item" wx:for-index="index"
• 默认情况下，wx:for-item="item" wx:for-index="index"不需要写，程序默认就是item和index（但只有在数组不嵌套时才可以省略）
  

block标签的作用

占位符标签，用于页面渲染，写代码时可以看见，小程序运行时会移除标签
但，用于渲染，其实却不进行渲染，只进行属性控制，包装元素

<view>
  <block 
    wx:for="{{persion}}" 
    wx:for-item="value" 
    wx:for-index="key"
    wx:key="age"
  >
  属性：{{key}}
  --
  值：{{value}} 
  </block>
</view>

这是view标签的

这是block标签的

条件渲染 wx:if

格式：wx:if wx:elif wx:else
条件满足，才会显示内容

<view wx:if="{{num>10000}}">比一万大</view> 
<view wx:elif="{{num>1000}}">比一千大</view> 
<view wx:else="{{num>100}}">比100大</view> 

以上代码只会显示比一千大

条件渲染 hidden

<view hidden>隐藏</view>//只加属性，直接隐藏
<view hidden="{{false}}">躲藏</view>//加上字符串表达式，false不隐藏，true隐藏

hidden只是隐藏标签，但wx:if只执行成立的标签，不成立的会删除，元素会被重新排列，可能影响性能，浪费资源。
hidden则是通过添加样式的方式切换显示。
因此，标签不会频繁出现，优先使用wx：if，标签要频繁切换显示，就用hidden

<view wx:if="{{num>10000}}">比一万大</view> 
<view wx:elif="{{num>1000}}">比一千大</view> 
<view wx:else="{{num>100}}">比100大</view> 
<view hidden>隐藏</view>
<view hidden="{{false}}">躲藏</view>

如下图所示，在调试器中可以发现，第一和三行代码都直接被删除了，只有wx:elif这一句因为成功运行而保留，而俩个hidden不管是否隐藏，标签仍然存在，只是样式中display变成了none
因此，hidden属性不要和display属性一起使用，hidden会被覆盖