第8课 微信小程序双向数据绑定this.setData:
第8课 微信小程序双向数据绑定:
效果图上来吧:
上面的输入框是input标签,输入的值与js代码中的data内的数据绑定
下面的显示文字是获取data内绑定的那个数据的值
微信没有v-mode这种方法哦,所以只能这样实现数据动态绑定
实现双向数据绑定的代码如下:
wxml全部代码如下:
<!-- bindinput是监听输入时触发change方法的函数 {{属性名}}:这是引入js内data数据的方法 -->
<input bindinput='change'></input>
<text>----------------------</text>
<view>{{inputValue}}</view>
js全部代码如下:
Page({
data: {
inputValue: "",
},
change(e){
//动态改变data数据
this.setData({
inputValue: e.detail.value
})
//一下这种方法改变data内数据的值不是动态的,页面数据不会随之变化
// this.data.inputValue = e.detail.value
}
})
wxss全部代码如下:
/*只给input标签设置一个外边距方便观看效果*/
input{
border: 1px solid #ccc;
}