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.算术运算




结果为:



目录
相关文章
|
1月前
|
JavaScript
第2节:Vue3 模板语法
第2节:Vue3 模板语法
20 0
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
30天前
|
小程序 JavaScript 开发者
WXML模板语法-事件绑定
这篇文章主要介绍了微信小程序中的事件处理机制。事件是渲染层与逻辑层通信的方式,允许开发者响应用户行为。常见的事件有`bindtap`,用于处理点击事件。事件处理函数中,可以通过`event`对象获取相关属性,如`target`(触发事件的源头组件)和`currentTarget`(事件绑定的组件)。事件参数传递可通过`data-*`属性实现,然后在事件处理函数中通过`event.target.dataset`访问。此外,`bindinput`用于监听输入框变化,配合`detail.value`可以获取最新的输入值,并实现数据同步。
17 0
|
8月前
|
设计模式 缓存 JavaScript
vue模板语法(上)
vue模板语法(上)
57 0
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发 开发者
Vue 3.0 模板语法
Vue 3.0 模板语法
|
1月前
|
JavaScript 开发者
Vue的模板语法(下)
Vue的模板语法(下)
40 0
|
1月前
|
JavaScript 前端开发
Vue模板语法集(上)
Vue模板语法集(上)
39 0
|
6月前
|
JavaScript 前端开发
Vue模板语法
Vue模板语法
50 0
|
6月前
|
JavaScript 前端开发
Vue模板语法(下)
Vue模板语法(下)
35 0