微信小程式的資料綁定以及資料簡單運算

WXML是架構設計的⼀套标簽語⾔，結合基礎元件、事件系統，可以建構出⻚⾯的結構。

在.js檔案當中設定變量，包括數字，字元，邏輯，json，list等等。

首先在檔案的data裡面可以設定一些變量，數字，字元等。

msg:"hello world",
    num:1000,
    xb:false
           

如下圖：表示檔案。以及代碼編輯的區域。js檔案就是現在所編輯的。

再者，在已經有變量之後，在wxml檔案當中對資料進行擷取，有倆個标簽是很常見的。

分别就是

<text>

和

<view>

，text就好比html當中的行級元素，而view則好比于

<div>

塊級元素。擷取變量使用的是

{{變量名}}

，如下所示：

<text>pages/img/img.wxml</text>
<text>123456789</text>    <!--行級元素-->
<view>987654321</view>    <!--塊級元素-->
<view>{{msg}}</view>
<view>{{num}}</view>
<view>{{xb}}</view>
           

擷取變量值後，看一下效果，以及text和view的差別。（最上面帶顔色的是設定了樣式，忘記取消了。。。）

還有就是json對象。定義資料。

person:{
      name:"嶽雲",
      age:18,
      high:184
    },
           

擷取當中的資料時，需要給出對象名.屬性名，直接擷取person會傳回Object對象。

<view>{{person}}</view>
<!--對對象的值進行擷取。-->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.high}}</view>
           

直接在wxml檔案當中實作運算：數字運算以及字元拼接運算：

<view>{{1+1}}</view><!--簡單運算-->  --》 = 2
<view>{{"1"+"1"}}</view>			--》 = 11