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

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

在将数据声明好以后,在 WXML 使用 Mustache 语法 ( 双大括号{{ }} ) 将变量包起来,从而将数据绑定

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

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

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

可以复制代码尝试:

html 复制代码
<!-- 展示内容 -->
<view>{{ obj.name }}</view>
<!-- 绑定属性值 -->
<view id="{{ id }}">绑定属性值</view>
<!-- 如果属性值时布尔值,也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}"/>

<!-- 算数运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view>
<!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view>
<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>

<!-- 在双大括号内部,只能写表达式,不能写语句,也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
javascript 复制代码
Page({

  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    id:1,
    isChecked: false,
    school: '消失的月老',
    obj: {
      name: 'tom'
    }
  }
})
相关推荐
2601_958352903 分钟前
双麦 DSP 音频模块实战:一文梳理 A-68 在全行业场景的声学解决方案与落地要点
前端·嵌入式硬件·音视频·语音识别·降噪消回音·音频处理模块
智码看视界20 分钟前
老梁聊全栈:JavaScript 原型链深入探索对象继承的奥秘
前端·javascript·ecmascript
布朗克16834 分钟前
39 Spring Boot Web实战
前端·spring boot·后端·实战
万岳科技系统开发39 分钟前
教育培训小程序搭建实战:打造一体化教学服务平台
小程序
纽格立科技1 小时前
DRM 发射端链路图(上)
前端·人工智能·车载系统·信息与通信·传媒
云水一下1 小时前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript
qq4356947011 小时前
Vue05
前端·vue.js
qq_422152571 小时前
PDF 解密工具怎么选?2026 年文档密码移除方案与注意事项
java·前端·pdf
YHHLAI1 小时前
前端工程化调用 AI 多模态生图模型:Qwen Image Demo 实战
前端·人工智能
To_OC1 小时前
我一直以为 Ajax 是个黑盒,直到我写了这 50 行代码
前端·后端·全栈