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

更新時間：2016年09月27日 11:15:36 作者：順子_RTFSC

這篇文章主要介紹了微信小程序數(shù)據(jù)綁定詳細介紹的相關(guān)資料,需要的朋友可以參考下

數(shù)據(jù)綁定有一部分前幾個看著還行，后面的幾個可能有幾個不理解，界面展示的數(shù)據(jù)有的也因為條件沒法顯示?？床欢目梢韵扔浿竺嬲嬲玫綍r就會明白，反正我是這樣想的。這里先記錄下

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底部導航               progress組件                         action-sheet
應用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件