菜鸟学习微信小程序之数据绑定

数据绑定

wxml 中的动态数据均来自对应Page的data.

简单绑定

数据绑定使用Mustache语法(双大括号)将变量包起来，可以用作于:

• 内容

<view>{{message}}</view>

Page({
    data:{
    messag:'hello word'
    }
})

• 组件属性（需要在双引号之内）

<view id="item-{{id}}"> </view>

Page({
    data:{
        id:0
    }
})

• 控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
    data:{
    condition:true
    }
})

• 关键字（需要在双引号之内）
  true：boolean 类型的true, 代表真值
  false: boolean 类型的false， 代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写checked="false" ，其计算结果是一个字符串，转成boolean类型后代表真值.

运算

可以在{{}} 内进行简单的运算，支持的有如下几种方式:

• 三元运算

<view hidden="{{flag ? true : false}}"> hidden</view>

• 算数运算

<view> {{a+b}} + {{c}} + d </view>

Page({
    data:{
    a:1,
    b:2,
    c:3
    }
})

view 中的内容为 3+3+d .

• 逻辑判断

<view wx:if="{{length > 5}}"> </view>

• 字符串运算

<view> {{"hello" + name}} </view>

Page({
    data:{
        name:'小明'
    }
})

• 数据路径运算

<view>{{object.key}}  {{array[0]}}</view>

Page({
    data:{
        object:{
        key:'hello'
        },
        array['xiaoming']
    }
})

• 数组

<view wx:for="{{zero, 1, 2, 3, 4}}">{{item}}</view>

Page({
    data:{
        zero:0
    }
})

• 对象

<template is="objectCombine" data="{{for:a, for:b}}"> </template>

Page({
    data{
        a:1,
        b:2
    }
})

最终组合成的对象是{for:1, bar:2}

• 也可以用扩展运算符

<template is="objectCombine" data="{{...obj1, ...obj2, e:5}}"></template>

Page({
    data:{
        obj1:{
           a:1,
           b:2
        },
        obj2:{
            c:3,
            d:4
        }
    }
})

最终组合成的对象是:{a:1, b:2, c:3, d:4, e:5}.