微信小程序的数据绑定

微信小程序的数据绑定是单向绑定，是从js文件到wxml文件。

上代码说明

新建一个dataBind页面

dataBind.js

// pages/dataBind/dataBind.js
Page({

/**
* 页面的初始数据
*/
data: {
str1: "数据绑定测试1"
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

dataBind.wxml

<view>

<text>{{str1}}</text>

</view>

运行效果如下

微信小程序的数据绑定

Data中的数据也可以动态设置
onLoad: function (options) {
var data1 = {
str2: "数据绑定2",
sub: {
str3: "数据绑定3"
},
imgPath:"/images/dataBind/timg.jpg"
}
this.setData(data1);
},


<view class="container">
<text>{{str1}}</text>
<text>{{str2}}</text>
<text>{{sub.str3}}</text>
<image src="{{imgPath}}"></image>
</view>

微信小程序的数据绑定

我们要注意到在两个标签中间引用数据的语法是{{str1}}
在标签上语法要注意的是”{{str1}}”
特别需要注意的是
条件渲染对变量的使用

onLoad: function (options) {
var data1 = {
str2: "数据绑定2",
sub: {
str3: "数据绑定3"
},
imgPath:"/images/dataBind/timg.jpg",
isShow:false
}
this.setData(data1);
},


<view class="container">
<text wx:if="false">{{str1}}</text>
<text wx:if="{{false}}">{{str2}}</text>
<text wx:if="{{isShow}}">{{sub.str3}}</text>
</view>
从表面上看三个字符串都应该不显示，实际测试结果如下：
微信小程序的数据绑定

从测试结果可以看出wx:if=”false”判断的是字符串是否为空，并没有取boolean值，正确的写法应该是wx:if="{{false}}"。
基本的数据绑定就是这样了。
如果要想从wxml向js写数据，就涉及到事件绑定了。

微信小程序的数据绑定

相关推荐