【WeChat MiniProgram】004 - 数据类型以及数据绑定

数据类型

1. 静态数据

在小程序编写时就已经确定的数据，直接在wxml中编辑。

2. 动态数据

需要在小程序运行的过程中，动态的从服务器端获取，在渲染输出到视图中显示的数据。

处理动态数据

1. 传统方式：DOM API

缺陷：

• 每次要更新数据时，都需要执行视图更新的代码；
• 代码维护困难，代码与页面的结构紧密耦合；

2. 数据绑定

• 概念：界面中的元素与数据进行映射
• 数据位置：
  小程序框架中，每个页面所需要的各种数据，都是集中在这个页面所注册的页面对象中定义的。
• 定义在页面对象中的data属性
  示例代码：

Page({
  data:{
    thisWeekMovie: {
      name: "La La Land",
      comment: "他和她的梦想 又或者 他和的她爱情",
      imagePath: "/images/poster.jpg"
    }
  }
})

注：这里的thisWeekMovie又称作内部状态变量

• 数据绑定：
  在页面的wxml中，以{{双大括号}}的形式将内部状态变量框起，放在组件中输出。
  示例代码：

<text>{{thisWeekMovie.name}}</text>
<text>{{count + score}}</text>
<text>{{(score>=6)?"及格":"不及格"}}</text>

注：第二、三行代码，表明可以在{{ }}中对变量进行操作后，再输出

• 数据总览与修改
  在开发者工具右下方AppData选项卡中操作（如图）
  

来源：https://www.cnblogs.com/codaland/p/12622572.html