小程序 wxml 语法 —— 35 wxml 语法 -声明和绑定数据

然后就去远行吧2025-03-09 17:26

在进行小程序开发时，小程序页面经常需要根据服务器响应的内容动态展示结构，或者根据程序员定义的变量来进行逻辑开发，服务器响应的内容和程序员定义的变量需要在合适的位置进行声明；

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

在将数据声明好后，在 wxml 文件中使用 Mustache 语法( 双大括号{{}} ) 将变量包起来，从而将数据绑定；

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

算数运算；
三元运算；
逻辑判断；
其它等；

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

下面打开微信开发者工具演示一下：

在 pages/cate/cate.js 中声明和定义数据，如下：

javascript 复制代码

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

在 pages/cate/cate/wxml 中绑定数据，如下：

html 复制代码

<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 -->

<!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{obj.name}}</view>

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

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

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

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

刷新之后，在页面上可以看到对应的数据，如下：

参考视频：尚硅谷微信小程序开发教程