微信小程序开发（六）：数据绑定

---

本篇笔记部分内容整理自网络中的一些文章及视频，详见文末的“参考资料”部分。存在部分AI生成的内容，请仔细甄别可能存在的错误。

---

---

一、引入

在Web开发时，往往有一些动态的数据需要随着程序的运行而变化，比如说倒计时、滑动条等；在使用JavaScript时，我们需要通过DOM来对元素的属性进行读写，这样比较麻烦而且会存在同步的问题，管理起来不是很方便。但现在，我们可以方便地通过数据绑定实现数据的实时更新与同步，免去了数据变化时需要手动同步的麻烦。下面是一个例子:

<button bindtap="addTimes">点击我</button>
<text>你点击了{{times}}次按钮</text>

page({
	data: {
		times: 0,
	}
	
	addTimes() {
		const new_time = this.data.time ++;
		this.setData(
			{thimes: new_time}
		);
	}
})

通过直接将<text>中的点击次数绑定到ts的变量times中，绑定点击按钮的事件到addTimes方法,简单快捷地实现了点击按钮增加次数的功能，并且无需手动将新数据同步到HTML中。

以往先获取再操作DOM的形式使得逻辑层与渲染层之间的耦合度很高，在操作数据时都必须先找到对应的DOM节点再进行操作，还需要让它们与JavaScript中的变量密切关联，这样做比较繁琐。伴随着编程技术的不断发展，angularjs、vue、react等框架的出现，MVVM模式的提出和完善，我们在开发中也实现了逻辑层与渲染的分离，无论是数据管理还是代码可读性都得到了很大的提升。

二、数据绑定详解

1.简单的数据绑定

如上例，在WXML中用{{}}表达式来绑定JavaScript文件中定义的变量，通过绑定点击事件bindtap="addTimes"实现了点击按钮修改变量的功能，同时新的变量会同步到WXML中，无需手动更新<text>的内容。

2.绑定节点属性

除了可以绑定WXML的节点内容以外，数据绑定还可以实现节点的class、style等属性的绑定。如下例：

<text class="{{ textClass }}" style="color:#fff; background:{{ bgc }}; display:block">{{ myName }}</text>
<button bindtap="setName">点击我</button>

.text-box {
	border: none;
}

.text-box-new{
	border: solid 1px red;
}

const app = getApp()

Page({
  data: {
    text: '1+1 = ？',
    textClass: 'text-box',
    bgc: blue
  },
  setName() {
    this.setData({
      text: "1+1 = 2",
      textClass:'text-box-new',
      bgc:'#bbded6'
    })
  }
})

点击按钮时，文本的内容、背景颜色、边框均会发生变化，其中的背景颜色和边框就是通过绑定属性实现的。需要注意的是，绑定属性时也需要将{{}}放在双引号中。

3.基本逻辑语法

{{}}中除了直接写入变量，还可以执行一些简单的算术逻辑运算，比如{{ num1 + num2 }}、{{ "姓名：" + name }}、{{ userName ? userName:'未登录' }}，其中三元表达式在实现根据条件选择显示的内容或使用的样式时非常简洁高效，是常用的代码策略。

4.条件逻辑

控制模板是否显示方面，在vue中有v-if，在angular中有ng-if，而在小程序中我们可以使用wx:if来达到同样的效果：

<text wx:if="{{bool}}">我叫听风是风</text>

需要注意的是，wx:if与我们以往使用框架中的效果一样，一旦变量为false，整个组件不会加载，甚至不在小程序解析的wxml模板中；这和组件加载但display:none是有区别的。同时，还可以使用wx:elif、wx:else这些来实现多分支判断：

<text wx:if="{{num > 0}}"> 大于0 </text>
<text wx:elif="{{num < 0}}"> 小于0 </text>
<text wx:else> 等于0 </text>

还可以绑定节点的hidden属性到一个布尔型的变量，该变量为false时元素会加载，但是会附加上display: none;的属性，即会被隐藏起来。

需要注意的是，关于hidden有个小坑，比如下面这个例子：

<text hidden="false">1</text>

你会发现这个组件并不会显示，而正确的写法是这样：

<text hidden="{{false}}">1</text>

为了规避这个问题，还是建议需要控制是否显示时，将hidden绑定到变量上显示；否则直接给一个display: block/none;的属性即可。

5.列表渲染

在微信小程序中提供了wx:for来实现将成组的数据绑定到WXML中，如下例：

<view wx:for="{{array}}">
	{{index}}: {{item}} 
</view>

Page({
  data: {
    array: [1,2,3,4]
  },
})

显示效果是这样的,数组的索引作为index，值作为item被绑定到了WXML中，为其中的每个数据都渲染了一个节点元素。

0: 1
1: 2
2: 3
3: 4

对象数组也可以绑定和解析：

<view wx:for="{{contents}}">
  {{item.name}}
</view>

Page({
  data: {
    contents: [{
      name:'第一个内容'
    },{
      name:'第二个内容'
    },{
      name:'第三个内容'
    }]
  },
})

---

参考资料

1. 听风是风.从零开始的微信小程序入门教程(三)[EB/OL].(2020-12-30)[2025-08-16]. https://www.cnblogs.com/echolun/p/12709761.html ↩