小程序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'
    }
  }
})
相关推荐
阿星AI工作室8 分钟前
n8n教程:5分钟部署+自动生AI日报并写入飞书多维表格
前端·人工智能·后端
浩宇软件开发20 分钟前
JavaScript 数组常用方法 find, findIndex, filter, map, flatMap, some
前端·javascript·vue.js
一涯30 分钟前
关于富文本\n处理
前端
鸿蒙小林30 分钟前
《仿盒马》app开发技术分享-- 回收订单状态修改与展示(44)
前端
前端Hardy43 分钟前
前端性能飞跃!9大高级API实战指南,80%的开发者只知其三
前端·javascript
喻衡深1 小时前
解锁 TypeScript 魔法:递归类型实现字段路径自动推导
前端·typescript
curdcv_po1 小时前
🏆有奖竞猜快问快答:请问?什么时候用web worker???
前端
sunsineq1 小时前
小程序还没有上线就提示小程序违规,支付失败
小程序
陶甜也1 小时前
threejs 实现720°全景图,;两种方式:环境贴图、CSS3DRenderer渲染
前端·vue.js·css3·threejs
上单带刀不带妹1 小时前
解锁 JavaScript 模块化:ES6 Module 语法深度指南
开发语言·前端·javascript·es6