创新互联小程序教程：微信小程序简易双向绑定

基础库 2.9.3 开始支持，低版本需做 兼容处理。

十余年的海晏网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整海晏建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“海晏网站设计”,“海晏网站推广”以来，每个客户项目都认真落实执行。

双向绑定语法

在 WXML 中，普通的属性的绑定是单向的。例如：

如果使用 ​this.setData({ value: 'leaf' })​ 来更新 ​value​ ，​this.data.value​ 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 ​this.data.value​ 。

如果需要在用户输入的同时改变 ​this.data.value​ ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 ​model​: 前缀：

这样，如果输入框的值被改变了， ​this.data.value​ 也会同时改变。同时， WXML 中所有绑定了 ​value​ 的位置也会被一同更新， 数据监听器 也会被正常触发。

用于双向绑定的表达式有如下限制：

1. 只能是一个单一字段的绑定，如

都是非法的；

2. 目前，尚不能 data 路径，如

   这样的表达式目前暂不支持。

在自定义组件中传递双向绑定

双向绑定同样可以使用在自定义组件上。如下的自定义组件：

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})

这个自定义组件将自身的 ​myValue​ 属性双向绑定到了组件内输入框的 ​value​ 属性上。这样，如果页面这样使用这个组件：

当输入框的值变更时，自定义组件的 ​myValue​ 属性会同时变更，这样，页面的 ​this.data.pageValue​ 也会同时变更，页面 WXML 中所有绑定了 ​pageValue​ 的位置也会被一同更新。

在自定义组件中触发双向绑定更新

自定义组件还可以自己触发双向绑定更新，做法就是：使用 setData 设置自身的属性。例如：

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

如果页面这样使用这个组件：

当组件使用 ​setData​ 更新 ​myValue​ 时，页面的 ​this.data.pageValue​ 也会同时变更，页面 WXML 中所有绑定了 ​pageValue​ 的位置也会被一同更新。

网站名称：创新互联小程序教程：微信小程序简易双向绑定
当前链接：http://www.csdahua.cn/qtweb/news39/402689.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网