-
1、为什么会有数据绑定:
- 用户界面呈现会因时刻不同、数据发生变化而有所不同。或是因为用户操作发生了动态改变,这就要求程序的运行过程中,要有动态的去改变渲染界面的能力,从而达到更好的用户体验。
- 在Web开发中,借助JavaScript并通过DOM接口,完成界面的动态更新;
- 在小程序中,使用WXML语言提供的数据绑定功能,完成界面的动态更新;
-
2、数据绑定语法:
- WXML 中的动态数据均来自对应 Page 的 data;
- 数据绑定使用 Mustache 语法(双大括号)将变量包起来。
{{ value }}
-
3、数据绑定基本用法:
3.1 内容绑定:
内容绑定是数据绑定的最基本用法,可以在标签内渲染动态的内容,需要在双引号之内。
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
3.2 组件属性绑定:
可以实现动态属性,借助动态属性,可以实现如下操作:
——动态样式;
——动态宽度;
——动态长度;
——.....
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
3.3关键字:
需要在双引号之内:
true
:boolean 类型的 true,代表真值。
false
: boolean 类型的 false,代表假值。
<checkbox checked="{{false}}"> </checkbox>
——注意: 不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。
3.4 运算:
可以在 {{}} 内进行简单的运算,支持的有如下几种方式:
- 三元运算:可以简化代码,减少代码量,提升代码的可读性。
<view hidden="{{flag ? true : false}}"> Hidden </view>
- 算数运算:标签内支持简单的加减乘除运算。
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
- 逻辑判断:
<view wx:if="{{length > 5}}"> </view>
- 字符串运算:标签内支持对字符串的操作。
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
- 数据路径运算: WXML支持对对象、数组的路径操作,读取其内部的数据。
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})
3.5 组合:
也可以在 Mustache 内直接进行组合,构成新的对象或者数组。
- 数组:
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
最终组合成数组[0, 1, 2, 3, 4]
。
- 对象: WXML可以在 Mustache内进行对象的组合。
<template is="objectCombine" data="{{for: a, bar: 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}
。
——注意:
- 如果组合时,出现了相同的变量名,后面的变量会覆盖前面的变量;
- 花括号和引号之间如果有空格,空格最终将解析成为字符串。
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
网友评论