小程序(数据绑定)

数据绑定使用Mustache(双大括号)将变量包起来,如下:

1
<view>{{ message }}</view>

而变量message在对应*.js文件中Page对象中进行设置,如下:

1
2
3
4
5
Page({
data: {
message: 'Hello Fancye'
}
})

我们再之前建立的工程下面新建目录demo/bindDataView及其对应文件,用于此次演示:

在index.js文件中编辑内容如下:

1
2
3
4
5
6
7
8
9
var helloData = {name: '老白'}
Page({
data:{
name: helloData.name
},
changeName: function() {
this.setData({name: 'Applet'})
}
})

我们定义了一个helloData变量,并将它的值赋值给Page对象的data变量。页面中所有的动态数据都可以在data 中进行获取。

在index.wxml中编辑内容如下,双大括号中的name值会动态的从page.data.name中获取到:

1
<view class="container"> Hello {{name}}! </view>

保存代码之后,可以在左边的视图中看到效果:

我们再在index.wxml中添加一个按钮用于动态改变name的值:

1
2
<view class="container"> Hello {{name}}! </view>
<button type="primary" bindtap="changeName"> Click me! </button>

在按钮组件属性中,有一个bindtap属性,它是一个事件处理函数,它绑定的参数changeName指向Page中提前配置好的一个Function,点击这个按钮则会触发changeName这个函数,事件在后面文章中将会介绍。

changeName函数定义了一行代码

1
this.setData({name: 'Applet'})

它的作用是动态改变Page.data的值,this就是Page的引用。

让我们看一下点击按钮前后,name的变化:
点击按钮之前

点击按钮之后

点击按钮之前name的值为“老白”,点击按钮之后,通过setData方法,将name值更改为Applet。

这种数据绑定的方式也可以用于其他方式:

组件属性:

1
<view id="item-{{ id }}"></view>

条件表达式:

1
<view wx:if="{{ condition }}"></view>

关键字:

1
<checkbox checked="{{ false }}"></checkbox>

​运算符

1
<view>{{ a + b }} - c</view>

逻辑运算:

1
<view>{{ length > 5}}</view>

坚持原创技术分享,您的支持将鼓励我继续创作!