第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;
}

好啦！就这么点代码就能实现如图效果哦！

赶紧赋值粘贴自己动手试试看吧！