【微信小程序】数据绑定+条件语句+列表循环
小程序视图层语法基础
视图层基本语法
1. 数据绑定 {{}}
WXML 中的动态数据均来自对应 Page 的 data。 简单绑定 数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
<view> {{ message }} view>
Page({
data: {
message: 'Hello MINA!'
}
})
组件属性(需要在双引号之内)
<view id="item-{{id}}"> view>
Page({
data: {
id: 0
}
})
运算可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
1.算数运算
<view> {{a + b}} + {{c}} + d view>
Page({
data: {
a: 1, b: 2, c: 3
}
})
view 中的内容为 3 + 3 + d。
2.三元运算
<view hidden="{{flag ? true : false}}"> Hidden view>
3.逻辑判断
<view wx:if="{{length > 5}}"> view>
4.字符串运算
<view>{{"hello" + name}}view>
Page({
data:{
name: 'MINA'
}
})
5.组合
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
- 数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} view>
Page({
data: {
zero: 0
}
})
最终组合成数组[0, 1, 2, 3, 4]
- 对象
<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}
注意：在逻辑层的数组绑定里不能调用函数。
2.条件渲染 wx:if wx:elif wx:else*
在框架中，我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True view>
Page({
data: {
condition: True
}
})
wx:if与hidden
- wx:if 与 hidden 都可以控制小程序中元素的显示与否。
- wx:if 是遇 true 显示，hidden 是遇 false 显示。
他们还有一层细微的区别： - wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
- 所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
- 如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
结论
频繁切换：用 hidden。偶尔切换或不切换：用 wx:if。
<text hidden="{{condition2}}">hidden属性值为真，则不显示，为false，则显示text>
可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 view>
<view wx:elif="{{length > 2}}"> 2 view>
<view wx:else> 3 view>
block wx:if
- 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个
<block wx:if="{{true}}">
<view> view1 view>
<view> view2 view>
block>
注意：
3.列表循环 wx:for
- 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
- 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<view wx:for="{{items}}">
{{index}}: {{item.message}}
view>
Page({
data: {
items: [{ message: 'foo', },
{ message: 'bar' }]
}
})
使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名：
<view wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
view>
注意会出现warning：
- Now you can provide attr “wx:key” for a “wx:for” to improve performance.
- 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
- 消除警告只需要在“wx:for”后面添加wx:key=“xxx”就行了，xxx为循环 array 中 item 的某个“属性”，该“属性” 的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 也可以是保留关键字”*this”代表在 for 循环中的 item 本身。
wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
view>
view>
view>
block wx:for
- 类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: view>
<view> {{item}} view>
block>