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等。
