文档:数据绑定 · 小程序
此贴为学习9 小时搞定微信小程序开发 的笔记
数据绑定使用两个花括号。
- 绑定文本内容
<!--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可以绑定组件的事件,通过绑定事件的回调函数来进行一些操作。详见:事件 · 小程序