双向绑定核心原理

小程序两大分层

小程序页面分为两层，数据交互是开发核心：

• 视图层(WXML)：页面可视化内容，输入框、按钮等UI元素

• 逻辑层(JS)：页面业务逻辑，data用于统一存储页面变量数据

model:value 双向绑定逻辑

区别于单向绑定，双向绑定实现视图 ↔ 数据自动互通：

1. 输入框输入内容（视图变化）→ 自动同步更新JS中data内的变量

2. JS代码修改data变量 → 页面输入框内容自动同步刷新

对比传统bindinput取值：传统方式需要实时监听输入框变化，手动编写赋值代码；双向绑定零监听函数，代码量减少50%以上，开发效率大幅提升。

例子

wxml

<view>
  <input placeholder="请输入用户名" model:value="{{username}}"></input>
  <view>{{username}}</view>
  <button bind:tap="login">登录</button>
  <button bind:tap="modify">修改用户名</button>
</view>

js

// pages/getvalue/getvalue.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:""
  },

  login(e){
    console.log("用户名：",this.data.username)
  },
  modify(e){
    this.setData({username:"lili"})
  }
})

执行结果

• 在输入框输入值，能改变 .js 文件中的变量
• 点击按钮，在 .js 文字改变变量的值，在 .wxml 页面中也跟着改变

原文出处：/show_1GW3XO0B9scv.html