1、標簽中數(shù)據(jù)綁定

• 示例 屬性名 = "{{變量或表達式}}"
• 綁定屬性變量時辆雾，雙引號與變量之間不能夠有空格隆判，否則會影響bool值判斷

  <view>
    <!-- 雙大括號和雙引號之間不能夠有空格举哟，否則會影響bool值判斷 -->
    <checkbox checked=" {{false}}"></checkbox>
    <checkbox checked="{{false}}"></checkbox>
  </view>

2亦鳞、列表渲染

• vue列表渲染示例

<div v-for="(item, index) in list"  :key="index" >

• 小程序?qū)?yīng)示例
• wx:for="{{數(shù)組或者對象}}"
• wx:for-item= "循環(huán)項名稱馍忽，默認為item"
• wx:for-index ="{{循環(huán)項索引名，默認為index}}"
• wx:key = "{{唯一標識燕差，普通數(shù)組時傳入 *this,對象數(shù)組時傳入對象的屬性名}}" -->

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">

- 對象循環(huán)時遭笋，wx:for-index表示屬性名，wx:for-item表示屬性值

  <view>
      <!-- 1徒探、wx:for="{{數(shù)組或者對象}}" wx:for-item= "循環(huán)項名稱瓦呼，默認為item" wx:for-index ="{{循環(huán)項索引名，默認為index}}"  -->
      <!-- 2: wx:key = "{{唯一標識测暗，普通數(shù)組時傳入 *this,對象數(shù)組時傳入對象的屬性名}}" -->
      <!-- 3:對象循環(huán)時央串，wx:for-index表示屬性名，wx:for-item表示屬性值 -->
      <view wx:for="{{list0}}" wx:key="*this">
        索引：{{index}}  value: {{item}}
      </view>        
      <view wx:for="{{list1}}" wx:for-item="person" wx:for-index="index111" wx:key="id">
        索引：{{index111}}  name: {{person.name}}
      </view>  
      <view wx:for="{{person}}" wx:key="age">
        屬性名:{{index}}  屬性值：{{item}}
      </view>  
      <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
        屬性名:{{key}}  屬性值：{{value}}
      </view>       
  </view>      

Page({
    data: {
        person:{
          age:88,
          name:"漢升",
          height:177,
          weight:80
        },
        list0:[1,2,'heiehi',true],
        list1:[
            {
                id:11,
                name:'唐僧'
            }, {
                id:22,
                name:'悟空'
            }, {
                id:33,
                name:'八戒'
            }, {
                id:44,
                name:'沙僧'
            }, {
                id:55,
                name:'白龍'
            },
        ]
    },
});

3碗啄、條件渲染

• wx:if 相當于 v-if
• 標簽上直接加屬性hidden质和，相當于v-show
• wx:elif="{{true/false}}"
• wx:else
• hide = "{{false/true}}"

  <!--1、 wx:if="{{true/false}}" 相當于v-if-->
  <!--2挫掏、 wx:elif="{{true/false}}"  -->
  <!--3侦另、 wx:else -->
  <!-- 標簽上直接加屬性hidden秩命，相當于v-show -->
  <!-- hide = "{{false/true}}" -->
  <view wx:if="{{false}}">看得到嗎</view>
  <view wx:if="{{true}}">試試看</view>
  <view hidden>hiden</view>
  <view hidden="{{false}}">hiden測試</view>