微信小程序 (七)數(shù)據(jù)綁定詳細(xì)介紹
數(shù)據(jù)綁定有一部分前幾個(gè)看著還行,后面的幾個(gè)可能有幾個(gè)不理解,界面展示的數(shù)據(jù)有的也因?yàn)闂l件沒(méi)法顯示??床欢目梢韵扔浿?,后面真正用到時(shí)就會(huì)明白,反正我是這樣想的。這里先記錄下
data.wxml
<!--數(shù)據(jù)綁定使用對(duì)象---內(nèi)容--> <view>{{message}}</view> <!--數(shù)據(jù)綁定使用對(duì)象---組件屬性---需要在雙引號(hào)之內(nèi)--> <view id="item-{{id}}">組件屬性</view> <!--數(shù)據(jù)綁定使用對(duì)象---控制屬性---需要在雙引號(hào)之內(nèi)--> <view wx:if="{{condition}}">控制屬性</view> <!--數(shù)據(jù)綁定使用對(duì)象---三元運(yùn)算--> <view hindden="{{flag ? true : false}}">三元運(yùn)算符</view> <!--數(shù)據(jù)綁定使用對(duì)象---算數(shù)運(yùn)算--> <view>我是運(yùn)算結(jié)果---{{a + b}} + {{c}} + d</view> <!--數(shù)據(jù)綁定使用對(duì)象---邏輯判斷--> <view wx:if="{{length > 5}}">asdf</view> <!--數(shù)據(jù)綁定使用對(duì)象---字符串運(yùn)算--> <view>{{"Hello " + name}}</view> <!--數(shù)據(jù)綁定使用對(duì)象---數(shù)組組合--> <view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view> <!--數(shù)據(jù)綁定使用對(duì)象---對(duì)象--> <template is="objectCombine" data="{{for: x, bar: y}}"></template> <!--數(shù)據(jù)綁定使用對(duì)象---擴(kuò)展運(yùn)算符對(duì)象 ... 將一個(gè)對(duì)象展開(kāi)--> <template is="objectCombine" data="{{...obj1, ...obj2, p: 5}}"></template> <!--數(shù)據(jù)綁定使用對(duì)象---對(duì)象的key和value相同時(shí)--> <template is="objectCombine" data="{{foo, bar}}"></template>
data.js
Page({ data:{ //內(nèi)容綁定 message: 'Hello WeApp', //組件屬性綁定 id: 0, //控制屬性綁定 condition: true, //三元運(yùn)算 flag:false, //算數(shù)運(yùn)算 a: 1, b: 2, c: 3, //邏輯判斷 length: 6, //字符串運(yùn)算 name: '順子', //數(shù)組組合 zero: 0, //對(duì)象 x: 0, y: 1, //對(duì)象展開(kāi) obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 }, p: 5, //對(duì)象key和value形同時(shí) foo: 'my-foo', bar: 'my-bar' }, })
相關(guān)文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導(dǎo)航 progress組件 action-sheet
應(yīng)用生命周期 button組件 modal組件
頁(yè)面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關(guān)文章
用Move.js配合創(chuàng)建CSS3動(dòng)畫的入門指引
這篇文章主要介紹了用Move.js配合創(chuàng)建CSS3動(dòng)畫的入門指引,文中介紹了這個(gè)JavaScript庫(kù)中的一些基本方法的使用,需要的朋友可以參考下2015-07-07JS前端實(shí)現(xiàn)解除頁(yè)面禁止復(fù)制功能方法詳解
這篇文章主要為大家介紹了JS前端實(shí)現(xiàn)解除頁(yè)面禁止復(fù)制功能方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08微信小程序 網(wǎng)絡(luò)API Websocket詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)API Websocket詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01解析Javascript設(shè)計(jì)模式Revealing?Module?揭示模式單例模式
這篇文章主要為大家解析了Javascript設(shè)計(jì)模式Revealing?Module?揭示模式及Singleton單例模式示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-084個(gè)頂級(jí)JavaScript高級(jí)文本編輯器
今天小編就為大家分享一篇關(guān)于4個(gè)頂級(jí)JavaScript高級(jí)文本編輯器,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-10-10Fabric.js 實(shí)現(xiàn)變換視窗示例詳解
這篇文章主要為大家介紹了Fabric.js 實(shí)現(xiàn)變換視窗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09微信小程序(應(yīng)用號(hào))開(kāi)發(fā)新聞客戶端實(shí)例
這篇文章主要介紹了微信小程序(應(yīng)用號(hào))開(kāi)發(fā)新聞客戶端實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10