小程序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'
    }
  }
})
相关推荐
康一夏23 分钟前
React面试题,封装useEffect
前端·javascript·react.js
Full Stack Developme36 分钟前
Redis 持久化 备份 还原
前端·chrome
猪猪拆迁队1 小时前
2025年终总结-都在喊前端已死,这一年我的焦虑、挣扎与重组:AI 时代如何摆正自己的位置
前端·后端·ai编程
❆VE❆1 小时前
WebSocket与SSE深度对比:技术差异、场景选型及一些疑惑
前端·javascript·网络·websocket·网络协议·sse
ConardLi1 小时前
SFT、RAG 调优效率翻倍!垂直领域大模型评估实战指南
前端·javascript·后端
rgeshfgreh1 小时前
Java高性能开发:Redis7持久化实战
前端·bootstrap·mybatis
李剑一2 小时前
uni-app使用html5+创建webview,可以控制窗口大小、显隐、与uni通信
前端·trae
Hooray2 小时前
2026年,站在职业生涯十字路口的我该何去何从?
前端·后端
小二·2 小时前
Python Web 开发进阶实战:安全加固实战 —— 基于 OWASP Top 10 的全栈防御体系
前端·python·安全
over6972 小时前
🌟 JavaScript 数组终极指南:从零基础到工程级实战
前端·javascript·前端框架