微信小程序 (七)數(shù)據(jù)綁定詳細介紹

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

