小程序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'
    }
  }
})
相关推荐
前端 贾公子几秒前
小程序使用web-view 修改顶部标题 && 安全认证文件部署在nginx
开发语言·前端·javascript
胖墩会武术42 分钟前
通过Auto平台与VScode搭建远程开发环境(以Stable Diffusion Web UI为例)
前端·vscode·stable diffusion
未来之窗软件服务1 小时前
封装拍照模块,拓展功能边界—仙盟创梦IDE
前端·javascript·html·摄像头·仙盟创梦ide
MaCa .BaKa2 小时前
39-居住证管理系统(小程序)
java·vue.js·spring boot·mysql·小程序·maven·uniapp
二倍本贝2 小时前
【慧游鲁博】【8】前后端用户信息管理:用户基本信息在小程序端的持久化与随时获取
小程序·状态模式
源力祁老师2 小时前
Odoo: Owl Props 深度解析技术指南
前端·javascript·网络
Liu.7742 小时前
vue3样式穿透用法
前端·vue.js·elementui
SYKMI4 小时前
@JsonFormat时区问题
java·前端·数据库
海盐泡泡龟6 小时前
web常见的攻击方式有哪些?如何防御?
前端·vue.js·webpack
EndingCoder8 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架