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

饭一口口吃2024-04-27 18:14

在Data中定义数据
早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:"我是定义的第一个数据"
  },

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

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

复制代码

<view>
{{info}}
</view>

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

Mustache语法主要应用场景

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

内容绑定

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

属性绑定

复制代码

<view>
  <image src="{{image}}" mode=""/>
</view>

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

在data中定义数据

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

Mustache语法主要应用场景

内容绑定

属性绑定

内容运算

算数运算