微信小程序的数据绑定
2021-03-02 本文已影响0人
Vector_Wan
数据绑定
几种数据绑定方式。
jQuery
<html>
<div id="content"></div>
<script>
var name = "名字";
$(#content).val(name);
</script>
</html>
Vue
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '信息'
}
})
</script>
微信小程序
<view>数据：{{message}}</view>
Page({
/**
* 页面的初始数据
*/
data: {
message: "这是一个信息"
}
})
注意 data 是一个字典。
获取和修改 data
通过绑定点击事件来获取和修改数据。
<button bindtap="changeData">点击修改页面的数据</button>
Page({
/**
* 页面的初始数据
*/
data: {
message: "这是一个信息"
},
// 点击修改数据
changeData: function () {
// 获取数据
console.log(this.data.message);
// 修改数据
this.data.message = "新的信息" // 只改后端！！
this.setData({message: "新的信息2"}) // 前后端都修改
}
})
这里的 this 代指的是传递给 page() 函数的 这个字典对象。
注意第一种方法只会修改后端的数据，要想已经渲染的数据也变化要使用 this.setData({传递一个字典}) 的方法。
