小程序学习日记（11）——wxml语法参考

数据绑定

WXML 中的动态数据均来自对应

简单绑定

数据绑定使用 Mustache（俗称“胡子语法”） 语法（{ { xxx } } 双大括号）将变量包起来，可以作用于：

<code>
<
view
> {{ message }} 
view
>
<
view
>{{  text  }}
view
>/<code>

<code>
Page
({        
  
  
data
: {
    
message
: 
'Hello MINA!'
  }
})/<code>

组件属性(需要在双引号之内)

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

<code>
Page
({
  
data
: {
    id: 
0
  }
})/<code>

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

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

<code>
Page
({
  
data
: {
    condition: true
  }
})/<code>

关键字(需要在双引号之内)
true： boolean 类型的 true，代表真值。 false： boolean 类型的 false，代表假值。

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

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

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

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

算数运算

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

<code>
Page
({
  
data
: {
    
a
: 
1
,
    
b
: 
2
,
    
c
: 
3
，
    
d
:
4
,
  }
})/<code>

逻辑判断

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

<code>{{
"好好学习"
 + name}}
/<code>

<code>
Page
({
  
data
:{
    name: 
'天天向上'
  }
})/<code>

数据路径运算

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

<code>
Page
({
  
data
: {
    
object
: {
      
key
: 
'你好 '
    },
     
array
: [
'小姐姐'
]，
    
key
:‘小程序学习日记’，
  }
})/<code>

组合
也可以在 Mustache（大括号） 内直接进行组合，构成新的对象或者数组。

数组

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

<code>
Page
({
  
data
: {
    zero: 
0
  }
})/<code>

对象

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

<code>
Page
({
  
data
: {
    
a
: 
1
,
    
b
: 
2
  }
})/<code>

也可以用扩展运算符 ... 来将一个对象展开

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

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

如果对象的 key 和 value 相同，也可以间接地表达

<code>
<
template
 
is
=
"objectCombine"
 
data
=
"{{foo, bar}}"
>
template
>
/<code>

<code>
Page
({
  
data
: {
    
foo
: 
'my-foo'
,
    
bar
: 
'my-bar'
  }
})/<code>

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

<code>
<
template
 
is
=
"objectCombine"
  
data
=
"{{...obj1, ...obj2, a, c: 6}}"
>
template
>
/<code>

<code>
Page({
  
data:
 
{
    
obj1:
 
{
      
a:
 
1
,
      
b:
 
2
    
},
    
obj2:
 
{
      
b:
 
3
,
      
c:
 
4
    
},
    
a:
 
5 

  
}
})
/<code>

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<code>
<
view
 
wx:for
=
"{{[1,2,3]}} "
>
  {{item}}
view
>/<code>

<code> 
<
view
 
wx:for
=
"{{[1,2,3] + ' '}}"
>
  {{item}}
view
>/<code>

凌晨12：45,今天就到这里了。明天接着来。做自己想做事就是快乐，幸福就是能一直做快乐的事。

關鍵字: wx 大括号 template