微信小程式中資料綁定的實例分析（程式碼）

這篇文章帶給大家的內容是關於微信小程式中資料綁定的實例分析（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1、微信小程式無法從js頁面中綁定wxml頁面中的標籤，以此來取得或設定標籤的值或屬性，全部都是用資料綁定的方式來實作
2、WXML 中的動態資料皆來自對應Page 的data。

資料綁定：
1、簡單的資料綁定

wxml中应用双大括号将data中的数据绑定到相应的标签中：
<view> {{ message }} </view>
js中：
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

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: &#39;MINA&#39;
  }
})

5>数据路径运算

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

//综上：
所有运算都是在{{}}之中进行的，这时候里面就相当于一些语言代码，而不是要呈现的内容

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

相關推薦：

微信小程式中資料的自訂分析過程

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

#微信小程式實例：實作隨機驗證碼（附程式碼）

以上是微信小程式中資料綁定的實例分析（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！