微信小程序 - 数据绑定（单向数据绑定、双向数据绑定）

一、单向数据绑定

1、简单数据绑定

• index.html

<view>你好，{{name}}</view>

• index.js

Page({
  data: {
    name: '张三'
  }
})

2、属性绑定

• index.html

<image src="{{imgUrl}}" mode="aspectFit"></image>

• index.js

Page({
  data: {
    imgUrl: 'https://example.com/image.jpg'
  }
})

3、运算绑定

• index.html

<view>结果：{{num1 + num2}}</view>

• index.js

Page({
  data: {
    num1: 10,
    num2: 20
  }
})

---

二、双向数据绑定

1、简易双向数据绑定

• index.html

<input model:value="{{inputValue}}" placeholder="请输入内容"></input>
<view>你输入的内容是：{{inputValue}}</view>

• index.js

Page({
  data: {
    inputValue: ''
  }
})

2、手动实现双向数据绑定

• index.html

<input value="{{inputValue}}" bindinput="onInputChange" placeholder="请输入内容" />
<view>你输入的内容是：{{inputValue}}</view>

• index.js

Page({
  data: {
    inputValue: ''
  },
  onInputChange: function (e) {
    this.setData({
      inputValue: e.detail.value
    });
  }
})