微信小程序8 data数据，双向绑定

声明变量data

我们每个页面文件（wxml）都有对应的js文件，点进去可以看到有data结构，这个就是存放变量的地方。

  data: {

  }

我们写一个变量进去

  data: {
      message:"我是message变量"
  }

 

获取变量

页面中使用

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

在js方法中调用变量，修改一下之前的方法

  changeInput(e){
    console.log(this.data.message);
  }

这里可以看到，需要用this.data.变量名调用。

 

双向绑定this.setData方法

但是在实际应用中，我们经常需要类似Vue中双向绑定的功能，即修改变量后页面要显示出来，这里可以使用小程序提供的this.setData

  changeInput(e){
    console.log(this.data.message);
    this.setData({
      message:e.detail.value
    });
  }

使用setData时变量就不需要指明this.data前缀了，因为这个this.setData只会操作data部分的变量。

这样我们在输入框输入时，message的值会跟着变并在页面上显示出来。