WXML模板语法-数据绑定

简介: 本文介绍了数据绑定的基本原则和在微信小程序中的应用。主要包括:1) 在页面的.js文件中定义数据;2) 使用Mustache语法(双大括号)在.WXML中绑定数据,用于内容和属性的动态渲染;3) 数据绑定的应用场景,如绑定内容、属性以及进行三元运算和算术运算。通过调试器可以查看页面中的所有数据。

1.数据绑定的基本原则


(1)在data中定义数据


(2)在WXML中使用数据


2.在data页面中定义数据:在页面对应的.js文件中,把数据定义在data对象中即可


(这里打错了 应该是数组类型的数据... 报意思啊)


3.Mustache语法的格式


把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可



4.Mustache语法的应用场景


(1)绑定内容


(2)绑定属性


(3)运算(三元运算,算数运算等)


5.动态绑定内容


.js文件中:



.wxml文件中:



6.动态绑定属性


.js文件中:



.wxml文件中:




7.三元运算


例如:





结果为:



如果希望查看当前页面里面的所有数据,可以通过调试器面板里面的AppData来查看当前页面中的所有数据



8.算术运算




结果为:



目录
相关文章
|
5月前
|
JavaScript
第2节:Vue3 模板语法
第2节:Vue3 模板语法
29 0
|
5月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
12月前
|
设计模式 缓存 JavaScript
vue模板语法(上)
vue模板语法(上)
69 0
|
5月前
|
JavaScript
|
5月前
|
JavaScript 前端开发 开发者
Vue 3.0 模板语法
Vue 3.0 模板语法
|
5月前
|
JavaScript 前端开发
Vue模板语法集(上)
Vue模板语法集(上)
49 0
|
10月前
|
JavaScript 前端开发
Vue模板语法(下)
Vue模板语法(下)
47 0
|
10月前
|
JavaScript 前端开发
Vue模板语法
Vue模板语法
61 0
|
12月前
|
缓存 JavaScript 前端开发
Vue模板语法(上)
Vue模板语法(上)
34 0
|
JavaScript 前端开发
Vue3-模板语法
Vue3-模板语法
50 0