小程序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'
    }
  }
})
相关推荐
烈风逍遥6 分钟前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web15 分钟前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码
2501_9160074719 分钟前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
前端探险家Rick25 分钟前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户9210802628628 分钟前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户9210802628628 分钟前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王29 分钟前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端
JQweryuiop29 分钟前
中小型游戏陪练工作室数字化管理实践:基于七彩屋电竞护航小程序订单、履约与绩效系统的落地复盘
大数据·游戏·小程序·架构
kiros_wang30 分钟前
Notification 本地通知:定时消息、点击路由跳转、桌面角标适配
前端