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 模板语法 - 数据绑定(九)
|
21天前
|
小程序 JavaScript 开发者
WXML模板语法-事件绑定
这篇文章主要介绍了微信小程序中的事件处理机制。事件是渲染层与逻辑层通信的方式,允许开发者响应用户行为。常见的事件有`bindtap`,用于处理点击事件。事件处理函数中,可以通过`event`对象获取相关属性,如`target`(触发事件的源头组件)和`currentTarget`(事件绑定的组件)。事件参数传递可通过`data-*`属性实现,然后在事件处理函数中通过`event.target.dataset`访问。此外,`bindinput`用于监听输入框变化,配合`detail.value`可以获取最新的输入值,并实现数据同步。
15 0
|
21天前
|
小程序 前端开发 JavaScript
WXML模板语法-条件渲染和列表渲染
本文档介绍了微信小程序中的条件渲染和列表渲染。条件渲染主要使用`wx:if`、`wx:elif`、`wx:else`和`hidden`属性。`wx:if`通过判断表达式决定是否渲染代码块,而`hidden`通过切换CSS的`display`属性控制元素隐藏。两者在性能和使用场景上有区别,频繁切换推荐使用`hidden`,复杂条件推荐使用`wx:if`。列表渲染则利用`wx:for`遍历数组生成列表,可以通过`wx:for-index`和`wx:for-item`自定义索引和项的变量名,同时需使用`wx:key`为列表项指定唯一标识以优化渲染效率。
12 0
|
8月前
11Vue - 模板语法(插值-属性)
11Vue - 模板语法(插值-属性)
22 0
|
8月前
|
JavaScript
10Vue - 模板语法(插值-纯HTML)
10Vue - 模板语法(插值-纯HTML)
48 0
|
8月前
|
设计模式 缓存 JavaScript
vue模板语法(上)
vue模板语法(上)
57 0
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发 开发者
Vue 3.0 模板语法
Vue 3.0 模板语法
|
1月前
|
JavaScript 前端开发
Vue模板语法集(上)
Vue模板语法集(上)
39 0