首頁 > 微信小程式 > 小程式開發 > 微信小程式中資料綁定的實例分析(程式碼)

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

不言
發布: 2018-08-21 16:38:41
原創
2649 人瀏覽過

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

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板