西安网站建设公司排名百度搜索排名怎么做

在 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 }}"/> 是否同意该协议

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

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

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