微信小程序中数据绑定的3个小应用
01 简单绑定
WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:
内容:
<view> {{ message }} </view>
Page({
data: {
message: 'Hello World!'
}
})
组件属性(需要在双引号之内):
<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 类型后代表真值。
02 运算
三元运算
代码:
<!--pages/test/test.wxml-->
<!--运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
data: {
flag:true
}
运行结果:
当flag为false时:
当flag为true时:
算数运算
代码:
<!--pages/test/test.wxml-->
<!--算数运算 -->
<view> {{a + b}} + {{c}} + d </view>
data: {
a: 1,
b: 2,
c: 3
}
运行结果:
字符串运算
代码:
<!--pages/test/test.wxml-->
<!--字符传运算 -->
<view>{{"hello " + name}}</view>
data:{
name: "tyl"
}
运行结果:
循环输出
代码:
<!--pages/test/test.wxml-->
<!--字符传运算 -->
<view wx:for="{{arr}}">项目:{{item}}</view>
data: {
arr:[1,2,3,4,5]
}
运行结果:
03 模块
代码:
<!--pages/test/test.wxml-->
<!--定义一个模板 -->
<template name="object">
<view>{{a}}</view>
<view>{{b}}</view>
</template>
<!--使用模板 -->
<template is="object" data="{{a,b}}"></template>
data: {
a:1,
b:2
}
运行结果:
-END-