微信小程序开发系列（十八）·wxml语法·声明和绑定数据

���录

1.  双大括号写法·用法一：展示内容

步骤一：创建一个data对象

步骤二：双大括号写法的使用

步骤三：拓展

2.  双大括号写法·用法二：绑定属性值

步骤一：给对象赋一个属性值

步骤二：双大括号绑定属性值

步骤三：拓展

3.  双大括号写法·用法三：运算的使用

3.1  算数运算

3.2  三元运算

3.3  逻辑运算

4.  注意事项

4.1  在双大括号内写入if语句

4.2  在双大括号内写入for语句

4.3  调用.js中的方法

---

        小程序页面中使用的数据均需要在 Page()方法的 data 对象中进行声明定义。

        在将数据声明好以后，在 WXML 使用 Mustache 语法（双大括号{{ }}）将变量包起来，从而将数据绑定在 {{ }} 内部可以做一些简单的运算，支持如下几种方式：

1. 算数运算

2. 三元运算

3. 逻辑判断

4. 其他…

注意事项：在{{ }}语法中，只能写表达式，不能写语句，也不能调用 js 相关的方法。

1.  双大括号写法·用法一：展示内容

步骤一：创建一个data对象

        找到index.js文件，将page内的代码删除，创建一个 data 对象：

Page({  // 在小程序页面中所需要使用的数据均来自于 data 对象  data:{    school:'小程序'  }})

步骤二：双大括号写法的使用

        找到index.wxml文件，将其内容删除，编写代码：

{{ school }}

        可以看到此时主界面，显示我们在data中写入的内容： 

步骤三：拓展

       再次找到index.js文件，在date文件中在创建一个对象：

Page({  // 在小程序页面中所需要使用的数据均来自于 data 对象  data:{    school:'小程序',    obj:{      name:'tom'    }  }})

        再次找到index.wxml文件，编写代码：

{{ school }}{{ obj.name }}

        可以看到：

2.  双大括号写法·用法二：绑定属性值

步骤一：给对象赋一个属性值

        找到index.js文件，在data中添加一个对象，给其赋值：

Page({  // 在小程序页面中所需要使用的数据均来自于 data 对象  data:{    id: 1,    school:'小程序',    obj:{      name:'tom'    }  }})

步骤二：双大括号绑定属性值

        首先，我们先不使用双大括号写法，来显示属性值：

绑定属性值

        使用双大括号：