微信小程序中數據綁定的案例區分（代碼）

本篇文章給大家帶來的內容是關于微信小程序中數據綁定的實例分析（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1、微信小程序無法從js頁面中綁定wxml頁面中的標簽，以此來獲得或者設置標簽的值或者屬性，全部都是用數據綁定的方式來實現
2、WXML 中的動態數據均來自對應 Page 的 data。

數據綁定：
1、簡單的數據綁定

wxml中應用雙大括號將data中的數據綁定到相應的標簽中：
<view> {{ message }} </view>
js中：
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2、標簽屬性的綁定

wxml中，其中綁定的要在雙引號之中：
<view id="{{id}}"> </view>
js中:
Page({
  data: {
    id: 0
  }
})

3、控制屬性的綁定

wxml中（綁定在雙引號中）
<view wx:if="{{condition}}"> </view>
//作為條件句出現，可以動態決定某一個標簽出現不出現
js中：
Page({
  data: {
    condition: true
  }
})
---或---
wxml中（綁定在雙引號中）
<view hidden="{{condition}}"> </view>
//作為條件句出現，可以動態決定某一個標簽出現不出現
js中：
Page({
  data: {
    condition: true
  }
})
//hidden與wx:if的區別：
hidden只是隱藏，但是節點是生成的
wx:if不生成節點

4、關鍵字(需要在雙引號之內)

true：boolean 類型的 true，代表真值。

false： boolean 類型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>
特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。
//在新版的微信小程序開發工具中，這個問題好像被解決了，即checked="true"也是對的

5、運算

1>三元運算

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

2>算數運算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
view中的內容為 3 + 3 + d。

3>邏輯判斷

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

4>字符串運算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

5>數據路徑運算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

//綜上：
所有運算都是在{{}}之中進行的，這時候里面就相當于一些語言代碼，而不是要呈現的內容

6、組合（不是很常見，不再贅述，如有需要，參考微信小程序開發文檔，數據綁定部分）

相關推薦：

微信小程序中數據的自定義分析過程

微信小程序中iconfont的用法詳解（附代碼）

微信小程序實例：實現隨機驗證碼（附代碼）

以上就是微信小程序中數據綁定的實例分析（代碼）的詳細內容，更多請關注php中文網其它相關文章！