wxml语法-声明和绑定数据

小程序页面中使用的数据均需要在Page（）方法的data对象中进行的data对象中进行声明定义
在将数据声明好以后，在WXML使用 Mustache 语法 （ 双大括号 {{}} ） 将变量包起来，从而将数据绑定

在 {{}} 内部可以做一些简单的运算，支持如下几种方式：

1. 算数运算
2. 三元运算
3. 逻辑判断
4. 其他…

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

1、展示内容

1.1、{{school}} 直接引用的是一个字符串或其他类型的简单值

1.1.1、index.wxml

<view>{{school}}</view>

1.1.2、index.js

Page({
  data: {
    school: "北京大学"
  }
});

1.2、{{obj.name}} 引用的是一个对象中的特定属性值

1.2.1、index.wxml

<view>{{obj.name}}</view>

1.2.2、index.js

Page({
  data: {
    obj: {
      name: "张三"
    }
  }
});

2、绑定属性值

2.1、使用数据绑定的方式来动态设置元素的属性值

2.1.1、index.wxml

<!-- 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{{id}}">绑定属性值</view>

2.1.2、index.js

Page({
  data: {
    id: '1'  // 这个值会被绑定到 <view> 元素的 id 属性
  }
});

2.2、根据页面数据的变化来控制复选框的选中状态

2.2.1、index.wxml

<!-- 如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}"/>

2.2.2、index.js

Page({
  data: {
    isChecked: true  // 初始状态下，复选框是选中的
  },

  // 假设你有一个方法来改变 isChecked 的值
  toggleCheckbox: function() {
    this.setData({
      isChecked: !this.data.isChecked  // 反转选中状态
    });
  }
});

如果 isChecked 的值为 true，则复选框会被选中；如果为 false，则复选框不会被选中。

3、在 {{}} 内部可以做一些简单的运算

3.1、index.wxml

<!-- 算术运算符 -->
<view>{{id+1}}</view>
<view>{{id-1}}</view>

<!-- 三元运算 -->
<view>{{id===1?'等于':'不等于'}}</view>

<!-- 逻辑判断 -->
<view>{{id===1}}</view>

3.2、index.js

Page({
  data: {
    id: '1'  // 这个值会被绑定到 <view> 元素的 id 属性
  }
});

4、在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法

<!-- 在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法 -->
<view>{{if(id===1){}}}</view>
<view>{{for(const i=0;i<=10;i++){}}}</view>
<view>{{obj.name.toUpperCase()}}</view>

在微信小程序中，模板语法并不直接支持复杂的 JavaScript 语句，如 if 语句和 for 循环。这是因为微信小程序的 WXML 模板语言主要用于简单的数据绑定和条件渲染，而不是执行复杂的逻辑。不过，你可以通过一些间接的方法来实现类似的功能。

1. 条件渲染

对于条件渲染，你可以使用 wx:if 或 hidden 属性来实现类似于 if 语句的效果。

使用 wx:if

<view wx:if="{{id === 1}}">ID 等于 1</view>
<view wx:else>ID 不等于 1</view>

使用 hidden

<view hidden="{{id !== 1}}">ID 等于 1</view>
<view hidden="{{id === 1}}">ID 不等于 1</view>

2. 循环渲染

对于循环渲染，你可以使用 wx:for 来遍历数组或对象。

遍历数组

<view wx:for="{{items}}" wx:key="index">
  {{item}}
</view>

遍历对象

<view wx:for="{{obj}}" wx:key="key">
  {{key}}: {{obj[key]}}
</view>

3. 调用方法

对于复杂的逻辑处理，比如字符串转换，你可以在页面的 JS 文件中定义方法，然后在 WXML 中调用这些方法。

页面 WXML 文件 (page.wxml)

<view>{{getUpperCaseName(obj)}}</view>

页面 JS 文件 (page.js)

Page({
  data: {
    obj: {
      name: "张三"
    }
  },

  getUpperCaseName: function(obj) {
    return obj.name.toUpperCase();
  }
});

完整示例

假设你有一个页面，需要根据 id 的值显示不同的内容，并且需要遍历一个数组，最后将对象的名称转换为大写。

页面 WXML 文件 (page.wxml)

<!-- 条件渲染 -->
<view wx:if="{{id === 1}}">ID 等于 1</view>
<view wx:else>ID 不等于 1</view>

<!-- 循环渲染 -->
<view wx:for="{{items}}" wx:key="index">
  {{item}}
</view>

<!-- 调用方法 -->
<view>{{getUpperCaseName(obj)}}</view>

页面 JS 文件 (page.js)

Page({
  data: {
    id: 1,
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    obj: {
      name: "张三"
    }
  },

  getUpperCaseName: function(obj) {
    return obj.name.toUpperCase();
  }
});

解释

1. 条件渲染：

   • 使用 wx:if 和 wx:else 根据 id 的值显示不同的内容。
   • 如果 id 等于 1，则显示 "ID 等于 1"；否则显示 "ID 不等于 1"。

2. 循环渲染：

   • 使用 wx:for 遍历 items 数组，并显示每个数组元素。
   • wx:key="index" 用于优化列表渲染性能。

3. 调用方法：

   • 在 WXML 中调用 getUpperCaseName 方法，该方法将对象的 name 属性转换为大写并返回。
   • 页面上会显示 "ZHANG SAN"。

通过这些方法，你可以在微信小程序中实现复杂的逻辑和动态内容渲染。