概述

微信小程序每个页面的数据都来自其对应的js文件的data

数据简单绑定就是，当data中的数据改变时，页面的数据也会实时改变（前者影响后者）

数据双向绑定就是，页面的数据和data中与之对应的数据只要有一个改变了，另一个就会改变（互相影响）

image-20221204192711603

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来

初始数据

1
2
3
4
5
6
/**
 * 页面的初始数据
 */
data: {
	num: 5
},

页面wxml代码

1
<text>{{num}}</text>

效果

初始数据的num是多少，页面的数据就是多少

双向绑定

目前微信小程序的双向绑定只能是一个单一字段的绑定，下面以input输入框为例，和值双向绑定的格式为model:value="{{num}}"（num为绑定的数据）

初始数据

和上面一样

页面wxml代码

1
2
3
4
<!-- 单向绑定 -->
<text style="color: red;font-size: 18px;">{{num}}</text>
<!-- 双向绑定 -->
<input type="text" style="border: 2px solid red;" model:value="{{num}}" />

效果

在输入框输入什么，文本就显示什么

PS.

官方文档：数据绑定 | 微信开放文档 (qq.com)和简易双向绑定 | 微信开放文档 (qq.com)