小程序學習日記（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,今天就到這裡了。明天接著來。做自己想做事就是快樂，幸福就是能一直做快樂的事。

關鍵字: item false 運算