小程序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'
    }
  }
})
相关推荐
小和尚同志21 分钟前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble2 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯2 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜3 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司3 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
江华森4 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http
IT_陈寒4 小时前
Redis的KEYS命令把我搞崩溃了,改用SCAN才活过来
前端·人工智能·后端
Jackson__5 小时前
为什么 Agent 越聊越慢?聊聊 Context(上下文)管理
前端·agent·ai编程
KaMeidebaby5 小时前
卡梅德生物技术快报|抗体合成:多肽抗体合成工程化方案:Nsp2 保守肽多抗制备与多维度验证
前端·网络·数据库·人工智能·算法
青禾网络5 小时前
前端做音画匹配这件事,我从"随机塞"到"AI 自动对齐"
前端·github