学习微信小程序WXML之数据绑定

本文主要是介绍学习微信小程序WXML之数据绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文档：数据绑定 · 小程序
此贴为学习9 小时搞定微信小程序开发 的笔记

数据绑定使用两个花括号。

1. 绑定文本内容

<!--index.wxml-->
<view><text>{{message}}</text>
</view>

//index.js
Page({data:{message:"Hello,world"}
})

2. 绑定属性

<!-- index.wxml -->
<view><text data-name="{{theName}}"></text>
</view>

data-name为自定义属性，当组件上触发的事件时，会把data-*属性发送给事件处理函数。所以可以把页面上的数据通过data属性传给逻辑层。

//index.js
Page({data: {theName:"Jack"}
})

3.运算符绑定

<!-- index.wxml -->
<view hidden="{{flag ? true : false}}">Hidden
</view>

view标签的hidden属性可以设置显示或隐藏view标签的内容。

//index.js
Page({data:{flag: false}
})

传入flag变量为false，hidden属性为false，显示标签内容；如果flag变量为true，则显示view标签内容。

还有其他绑定方式，请看小程序框架文档：数据绑定 · 小程序

标签属性

所有组件都有的共同属性：

详见：组件 · 小程序
bind、catch可以绑定组件的事件，通过绑定事件的回调函数来进行一些操作。详见：事件 · 小程序

这篇关于学习微信小程序WXML之数据绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---