零基础学习微信小程序（4）：模板语法

数据绑定：

在页面中插入字符串，数字，bool，object类型的数据：
此时如果直接在wxml的view标签里写入是不管用的。需要在js文件里写入数据的属性。

wxml文件：

<!--pages/demo03/demo03.wxml-->
<view>字符串：{{message}}</view>
<view>数字：{{num}}</view>
<view>布尔值：{{isRight}}</view>
<view>对象：{{Student.name}}</view>
<view>{{Student.ID}}</view>

js文件：

// pages/demo03/demo03.js
Page({/*** 页面的初始数据*/data: {message:"Hello World",num:20,isRight:true,Student:{name:"咸鱼4号",ID:2012121,},isChecked:false}
})

数据在标签的属性中使用：

<view data-num="{{num}}">自定义属性</view>
<view><checkbox checked="{{isChecked}}"></checkbox>
</view>

同时应该注意的是在代码：

<checkbox checked="{{isChecked}}"></checkbox>

在双引号和花括号之间是不能加上空格的
错误写法：

<checkbox checked=" {{isChecked}}"></checkbox>

此时会使复选框的出现选中的状态。

运算：

在wxml里的花括号里可以进行一些运算，例如：数字的加减乘除，字符串的拼接，一些逻辑运算等。

<!--数字运算-->
<view>{{1+1}}</view>
<!--字符串拼接-->
<view>{{'1'+'1'}}</view>
<!--三元运算-->
<view>{{1>2?'false':'true'}}</view>
<!--逻辑判断-->
<view wx:if="{{3>5}}">1</view>
<view wx:else>2</view>

注意点：和以上是一样的双引号和花括号之间是不能有空格的，不然会被解析成字符串

列表渲染：

1、列表循环：wx-for
语法：
wx:for="{{数组或者对象}}"
wx:for-item=“循环项的名称”
wx:for-index=“循环项的索引”
wx:key=“唯一的值”
项的名称默认为：item；wx:for-item可以指定数组当前元素的变量名
下标变量名默认为：index；wx:for-index可以指定数组当前下标的变量名
wx：key:用来提高数组的渲染的性能，可以保证每一个项的唯一性。绑定的值可以是string类型，也可以是*this类型。若为string类型，那么就表示循环项中的唯一属性；如果是保留字“*this”，它的意思就是item本身即循环项，*this代表的必须是唯一的字符串和数组。例如：[1,2,3],[‘1’,‘2’,‘3’]。

list:[{name:"张三",ID:20121},{name:"李四",ID:20122},{name:"王五",ID:20123}]

<view><view wx:for="{{list}}"wx:for-item="item"wx:for-index="index"wx:key="ID">索引：{{index}};姓名：{{item.name}}   学号：{{item.ID}}</view>
</view>
<view><view wx:for="{{Student}}"wx:for-item="value"wx:for-index="key"wx:key="ID">属性：{{key}} 值：{{value}}</view>
</view>

注意点：
（1）在数组出现嵌套循环的时候，应该要注意绑定的名称不要重名：
wx:for-item=“item” 　 wx:for-index=“index”
（2）一般情况下，不写：
wx:for-item=“item” 　 wx:for-index=“index”

补充：循环数组：
语法:[ ].forEach
该方法可以遍历数组，遍历数组的时候如果修改了元素的值，也会导致原数组被修改
例：

 tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

循环tabs，判断i是否等于index的时候，通过判断的结果对该项的isActive进行修改

条件渲染：

可以使用wx：if=“{{istrue}}”来判断是否需要对代码块进行渲染

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

hidden：
类似于wx：if
以下的两种方式都是适用的：

<view ><view hidden>h1</view><view hidden="{{true}}">h2</view>
</view>

在标签不是频繁的切换的时候，使用wx：if。因为它是直接把标签从页面结构上给移除掉的。
在标签频繁的切换显示的时候，优先使用hidden。因为它是通过添加样式的方式来切换显示的。（display：none）因为hidden属性是和display属性相关的，所以在使用hidden属性的时候，不能添加display属性
举个例子：

<view hidden style="display:flex">hidden</view>

在这里虽然写了hidden，但是还是会在页面中出现hidden的字段。这是因为display：flex覆盖了hidden的属性：display：none。所以才会出现字。

文章内容为视频零基础玩转微信小程序【黑马程序员】知识点整合