微信小程序：5.数据绑定

1. 在Data中定义数据
2. 早wxml中进行数据使用

在data中定义数据

在页面对应的js对象中找到data，然后把数据进行定义即可

Page({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
    info:"我是定义的第一个数据"
  },
1
2
3
4
5
6
7
8
9
10
11
12

在wxml页面中进行数据的使用

使用mustache语法进行页面的使用，类似于vue的数据绑定

<view>
{{info}}
</view>
1
2
3

使用两个花括号进行数据的绑定填充

Mustache语法主要应用场景

• 绑定内容
• 绑定属性
• 运算（三元运算符运算，和算数运算Mustache语法主要应用场）

内容绑定

在data中定义内容，然后在wxml中进行使用

属性绑定

<view>
  <image src="{{image}}" mode=""/>
</view>
1
2
3

内容运算

算数运算