当前位置：首页 > article >正文

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

article 2025/3/11 4:26:02

在 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 中定义数据，如下所示：

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

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

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

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

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