小程序 wxml 语法 —— 39 简单双向数据绑定

然后就去远行吧2025-03-10 9:30

在 WXML 中，普通属性的绑定是单向的，比如 <input value="{``{ value }}" />，当数据发生改变时，页面也会随之发生变化，但是当用户在输入框中输入最新内容，最新内容并不会同步给 value 数据，这就是单向数据绑定；

如果希望用户输入数据的同时修改 data 中的数据，可以借助简单双向绑定机制，在对应属性之前添加 model: 前缀即可：例如 <input model:value="{``{ value }}" />；

注意事项：简易双向绑定的属性值有如下限制：

只能是一个单一字段的绑定，如：错误用法：<input model:value="值为 {``{ value }}" />；
不能写 data 路径，也就是不支持数组和对象，例如：错误用法：<input model:value="{``{ a.b }}" />；

下面打开微信开发者工具演示一下如何进行简单双向数据绑定：

在 pages/cate/cate.js 中定义数据，如下所示：

javascript 复制代码

Page({
  data: {
    value: 123,
    isChecked: false
  }
})

在 pages/cate/cate.wxml 中定义页面样式，如下所示：

javascript 复制代码

<!-- 单向绑定：数据能够影响页面，但是页面更新不会影响到数据 -->
<input type="text" value="{{ value }}"/>

<!-- 双向绑定：数据能够影响页面，页面更新也能够影响数据 -->
<input type="text" model:value="{{ value }}"/>

<!-- 如果需要获取复选框的选中效果，需要给 checked 添加 model: -->
<checkbox model:checked="{{ isChecked }}"/> 是否同意该协议

刷新页面，可以看到具体的效果如下：

当修改页面上的值的时候，通过观看右下角的 AppData 的值可以发现，Page 中对应的数据也相应被修改了，实现了简单的双向数据绑定；

参考视频：尚硅谷微信小程序开发教程