模板语法

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

WXML和HTML的不同：

• WXML中的text相当于HTML中的span
• WXML中的view相当于HTML中的div
• WXML中的checkbox相当于HTML中的复选框

数据绑定

Page({
    data:{
        msg:"hello mina",
        num:10000,
        isGirl:false,
        person:{
            name:"王",
            age:50
        },
        isChecked:false
    }
})

<!--字符串-->
<view>{{msg}}</view>
<!--数字-->
<view>{{num}}</view>
<!--bool类型-->
<view>是否是伪娘{{isGirl}}</view>
<!--object-->
<view>{{person.age}}</view>
<!--在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--使用boll类型当属性 checked
 字符串和花括号之间不要存在空格，否则会导致识别失败
-->
<checkbox checked="{{isChecked}}"></checkbox>

运算

<!--加减-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<!-- 三元表达式-->
<view>{{10%2===0?"偶数":"奇数"}}</view>

列表渲染

1. wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”

2. wx:key=“唯一的值” 用来提高列表渲染的性能

   1. wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
   2. wx:key="*this" 就表示你的数组是一个普通的数组，" *this"表示是循环项

3. 当出现数组的嵌套循环的时候，尤其要注意，不要重名

4. 默认情况下，我们不写wx:for-item="item" wx:for-index="index"，小程序也会把 循环项的名称 和 索引的名称 item和index

   只有一层循环的话wx:for-item="item" wx:for-index="index"才可以省略‘

5. 对象的循环，wx:for-item指向的是对象的值，wx:for-index指向的是对象的属性

项的变量名默认为item， wx:for-item可以指定数组当前元素的变量名

下标变量名默认为index，wx:for-index可以指定数组当前下标的变量名

<view>
	<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
    索引：{{index}}
        --
    值：{{item.name}}
    </view>
</view>

wx:key用来提高数据渲染的性能

wx:key绑定的值，有如下的选择

1. string类型，表示循环项的唯一属性

   list:[{id: 0, name: "炒饭"}, {id: 1, name: "炒面"}]
   wx.key="id";
   

   <view>
     <view wx:for="{{list}}" wx:key="index" wx:for-item="item" >
       {{index}}---{{item.name}}
     </view>
   </view>
   

2. 保留字*this，它的意思是item本身，*this代表的必须是唯一的字符串和数组

   list:[1, 2, 3, 4, 5]
   wx:key="*this"
   

block标签

block在写代码的时候可以看见，但是运行代码的时候不会变成一个真正的dom元素——运行时，block标签消失，但是其他标签不受任何影响

用处：用来绑定循环

<block wx:for="{{list}}">
    <view>
        {{index}}---{{item.name}}
    </view>
</block>

条件渲染

wx:if

在框架中，使用wx:if"{{condition}}"来判断是否需要渲染该代码块

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

• if成立执行，elif和else都不执行
• if不成立，elif成立执行，else不执行
• zhijieif和elif不成立，else执行

hidden

1. 在标签上直接加入属性 hidden——标签直接隐藏
2. hidden="{{条件表达式}}"

<view hidden>11111</view>
<view hidden="{{true}}">22222</view>

区别及使用场合

1. 当标签不是频繁地切换显示，优先使用wx-if

   直接把标签从页面结构给移除掉

2. 当标签频繁地切换显示的时候，优先使用hidden

   通过添加样式的方式切换显示