微信小程序 (七)數據綁定詳細介紹
數據綁定有一部分前幾個看著還行,后面的幾個可能有幾個不理解,界面展示的數據有的也因為條件沒法顯示??床欢目梢韵扔浿竺嬲嬲玫綍r就會明白,反正我是這樣想的。這里先記錄下
data.wxml
<!--數據綁定使用對象---內容--> <view>{{message}}</view> <!--數據綁定使用對象---組件屬性---需要在雙引號之內--> <view id="item-{{id}}">組件屬性</view> <!--數據綁定使用對象---控制屬性---需要在雙引號之內--> <view wx:if="{{condition}}">控制屬性</view> <!--數據綁定使用對象---三元運算--> <view hindden="{{flag ? true : false}}">三元運算符</view> <!--數據綁定使用對象---算數運算--> <view>我是運算結果---{{a + b}} + {{c}} + d</view> <!--數據綁定使用對象---邏輯判斷--> <view wx:if="{{length > 5}}">asdf</view> <!--數據綁定使用對象---字符串運算--> <view>{{"Hello " + name}}</view> <!--數據綁定使用對象---數組組合--> <view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view> <!--數據綁定使用對象---對象--> <template is="objectCombine" data="{{for: x, bar: y}}"></template> <!--數據綁定使用對象---擴展運算符對象 ... 將一個對象展開--> <template is="objectCombine" data="{{...obj1, ...obj2, p: 5}}"></template> <!--數據綁定使用對象---對象的key和value相同時--> <template is="objectCombine" data="{{foo, bar}}"></template>
data.js
Page({ data:{ //內容綁定 message: 'Hello WeApp', //組件屬性綁定 id: 0, //控制屬性綁定 condition: true, //三元運算 flag:false, //算數運算 a: 1, b: 2, c: 3, //邏輯判斷 length: 6, //字符串運算 name: '順子', //數組組合 zero: 0, //對象 x: 0, y: 1, //對象展開 obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 }, p: 5, //對象key和value形同時 foo: 'my-foo', bar: 'my-bar' }, })
相關文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導航 progress組件 action-sheet
應用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數據綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關文章
用Move.js配合創(chuàng)建CSS3動畫的入門指引
這篇文章主要介紹了用Move.js配合創(chuàng)建CSS3動畫的入門指引,文中介紹了這個JavaScript庫中的一些基本方法的使用,需要的朋友可以參考下2015-07-07微信小程序 swiper制作tab切換實現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-01-01解析Javascript設計模式Revealing?Module?揭示模式單例模式
這篇文章主要為大家解析了Javascript設計模式Revealing?Module?揭示模式及Singleton單例模式示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08