微信小程序开发教程-双向绑定 作者：马育民 • 2026-06-21 14:24 • 阅读：10007 # 双向绑定核心原理 ### 小程序两大分层 小程序页面分为两层，数据交互是开发核心： - **视图层\(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"}) } }) ``` ### 执行结果 [](https://www.malaoshi.top/upload/0/0/1GW3XO06l5Jt.png) - 在输入框输入值，能改变 `.js` 文件中的变量 - 点击按钮，在 `.js` 文字改变变量的值，在 `.wxml` 页面中也跟着改变 原文出处：http://malaoshi.top/show_1GW3XO0B9scv.html