双向数据绑定

1.使用 model:value 语法（推荐）

微信小程序从基础库 2.9.3 开始支持 model:value 语法，用于实现双向数据绑定。

<!-- index.wxml -->
<view>
  <input model:value="{{inputValue}}" placeholder="请输入内容" />
  <text>输入的内容：{{inputValue}}</text>
</view>

// index.js
Page({
  data: {
    inputValue: '' // 初始化数据
  }
});

 说明：

• model:value 是微信小程序提供的双向绑定语法。

• 当输入框内容变化时，inputValue 会自动更新；同时，修改 inputValue 的值也会同步到输入框。

2. 使用 bindinput 事件手动实现

如果基础库版本较低，可以通过 bindinput 事件手动实现双向绑定。

<!-- index.wxml -->
<view>
  <input value="{{inputValue}}" bindinput="onInput" placeholder="请输入内容" />
  <text>输入的内容：{{inputValue}}</text>
</view>

// index.js
Page({
  data: {
    inputValue: '' // 初始化数据
  },
  onInput: function(event) {
    this.setData({
      inputValue: event.detail.value // 更新数据
    });
  }
});

说明：

• bindinput 是输入框内容变化时触发的事件。

• 通过 event.detail.value 获取输入框的最新值，并调用 this.setData 更新数据。

3. 双向绑定的应用场景

• 表单输入：实时同步输入框内容。

• 开关组件：同步开关状态。

• 选择器：同步选择器的值。

示例：开关组件双向绑定

<!-- index.wxml -->
<view>
  <switch checked="{{isChecked}}" bindchange="onSwitchChange" />
  <text>开关状态：{{isChecked ? '开启' : '关闭'}}</text>
</view>

// index.js
Page({
  data: {
    isChecked: false // 初始化开关状态
  },
  onSwitchChange: function(event) {
    this.setData({
      isChecked: event.detail.value // 更新开关状态
    });
  }
});

4. 注意事项

• 性能问题：频繁更新数据可能会导致性能问题，建议合理使用双向绑定。

• 兼容性：model:value 需要基础库版本 2.9.3 以上，低版本需使用 bindinput 手动实现。

• 组件支持：model:value 支持大部分表单组件，如 input、textarea、picker 等。