wxml模板语法-数据绑定

数据绑定原则

• 在data中定义数据

在页面对应的js文件中，把数据定义到data对象中：

Page({
    data: {
        // 字符串类型的数据
        info: 'hello world',
        // 数组类型的数据
        personList: [
            {
                name: '法外狂徒',
                age: '18'
            },
            {
                name: '张三',
                age: '22'
            }
        ]
    }
})

• 在wxml中使用数据

使用Mustache语法把data中的数据绑定到页面中渲染：

<view> {{ 数据名称 }}</view>

Mustache语法主要应用场景

绑定内容

页面数据：

Page({
    data: {
        info: 'hello world',
    }
})

页面绑定内容：

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

绑定属性

页面数据：

Page({
    data: {
        imgSrc: './1.png'
    }
})

页面绑定属性：

<image src="{{imgSrc}}" mode='widthFix'></image>

widthFix宽度不变，高度自适应

运算

页面数据：

Page({
    data: {
        randomNum: Math.random() * 10 //生成10以内随机数
    }
})

页面绑定内容：

<view>{{ randomNum >=5 ? '大于等于5' : "小于5" }}</view>