微信小程序WXML页面绑定数据

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "你好，微信小程序",
    status: 100,
    isLogin: true,
    person:{
      name: "张三",
      age: 22,
      profession: "student"
    },
    isChecked: true
  },
})

msg: “你好，微信小程序”, 所以直接括住 msg 就可以获取到后面的值了

<view>{{msg}}</view>

布尔类型checkbox 就可以实现是否选中的效果

<view>
    <checkbox checked="{{isChecked}}"></checkbox>
</view>

对象输出一个 Object 类型，如果想要拿到对象的属性值，一定要指定到具体的属性

<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.profession}}</view>

模拟数据：

Page({
  data: {
    person:{
      pid: 1,
      name: "张三",
      age: 22,
      profession: "student"
    },
    studentList:[{
        sid:1,
        name:"汤姆",
        gender:"男"
      },{
        sid:2,
        name:"杰克",
        gender:"男"
      },{
        sid:3,
        name:"玛丽",
        gender:"女"
      }
    ]
  },
})

组件（标签）上使用 wx:for 就可以绑定一个数组或集合内容，就可用数组中各项的数据重复渲染该组件

<view>
    <view 
    wx:for="{{studentList}}" wx:for-item="item" wx:for-index="index" wx:key="sid">
    	{{index}} --- {{item.name}} 
    </view>
</view>

• wx:for：数组或者对象
• wx:for-item：循环项（数组或集合）的变量名称，同时一般默认为 item
• wx:for-index：循环项（数组或集合）的索引（下标），同时一般默认为 index
• wx:key：绑定一个唯一的值，可以提高列表渲染的性能，可以简单理解为主键的概念，例如这里我传入了 studentList 中不可能重复的值 sid
• 如果你的数组只是一个普通的数组，例如 [11,22,65,23,3,6] 没有所谓唯一的值，就可以使用 wx:key=“*this” 即表示你的数组是一个普通的数组，*this 表示的是 item 本身
• 如果你的循环只有一层，那么 wx:for-item=“item” wx:for-index=“index” 这两个内容实际上是可以省略的，小程序会自动把这两个内容设置为 item 和 index

定义：
存储：

使用：