數(shù)據(jù)綁定

.js

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
         age:78,
         height:188,
         weight:166,
         name:"迷人軟"
    },
    isChecked:false
  },
})

.wxml

<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 數(shù)字類型 -->
<view>{{num}}</view>
<!-- 3 布爾類型 -->
<view>是否是偽娘：{{isGirl}}</view>
<!-- 4 object類型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5 在標(biāo)簽的屬性中使用 -->
<view data-num="{{num}}">自定義屬性</view>
<!-- 6 使用bool類型充當(dāng)屬性  checked
        1、字符串和花括號之間一定不要存在空格  否則會導(dǎo)致識別失敗-->
<checkbox  checked="{{isChecked}}"></checkbox>

---

運(yùn)算

.wxml

<!--  運(yùn)算  表達(dá)式 
        1、數(shù)字的加減
        2、字符串拼接
        3、三元表達(dá)式-->

<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 10%2===0 ? '偶數(shù)' : '奇數(shù)' }}</view>

列表渲染

• 數(shù)組循環(huán)

<!-- 數(shù)組循環(huán) 
       1、wx:for="{{數(shù)組或?qū)ο髛}"  wx:for-item="循環(huán)項(xiàng)的名稱"  wx:for-index="循環(huán)項(xiàng)的索引"
       2、wx:key="唯一的值"  用來提高列表渲染的性能
         1、綁定一個普通字符串時，這個字符串名稱肯定是循環(huán)數(shù)組中對象的唯一屬性
         2、wx:key="*this"  表示數(shù)組是一個普通數(shù)組  *this表示是循環(huán)項(xiàng)
           [1,222,322,45]
           ["1","adx","aaa3","aeerr"]
       3、當(dāng)出現(xiàn)數(shù)組的嵌套循環(huán)的時候  要注意以下綁定的名稱不要重名
           wx:for-item="item"   wx:for-index="index"
       4、只有一層循環(huán)(wx:for-item="item" wx:for-index="index") 可以省略,小程序會默認(rèn)設(shè)置成item和index
-->

<view>
<view>數(shù)組循環(huán)</view>
 <view 
 wx:for="{{list}}" 
 wx:for-item="item" 
 wx:for-index="index"
 wx:key="id"
 >
     索引：{{index}}
     --
     值：{{item.name}}
    </view>
</view>

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    list:[
      {
        id:0,
        name:"路飛"
      },
      {
        id:1,
        name:"喬巴"
      },
      {
        id:2,
        name:"索隆"
      }
    ]
  },
})

• 對象循環(huán)

 <!-- 對象循環(huán)
        1、wx:for="{{對象}}"   wx:for-item="對象的值"  wx:for-index="對象的屬性"
        2、循環(huán)對象時,最好更改 item 和 index 的名稱
             wx:for-item="value"   wx:for-index="key"
 -->
 <view>
 <view>對象循環(huán)</view>
 <view 
 wx:for="{{person}}"
 wx:for-item="value"  
 wx:for-index="key"
 wx:key="age">
      屬性：{{key}}
      --
      值：{{value}}
    </view>
</view> 

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    person:{
         age:78,
         height:188,
         weight:166,
         name:"迷人軟"
    }
  },
})

• block標(biāo)簽

<block
 wx:for="{{list}}" 
 wx:for-item="item" 
 wx:for-index="index"
 wx:key="id"
 class="my_list"
 >
     索引：{{index}}
     --
     值：{{item.name}}
    </block>

---

條件渲染

• wx:if

<!--
    1、wx:if="{{true/false}}" 
    2、if,else,if else
      wx:if
      wx:elif
      wx:else
-->
<view>
    <view>wx:if</view>
    <view wx:if="{{true}}">顯示</view>
    <view wx:if="{{false}}">隱藏</view>

    <view wx:if="{{false}}">aaa</view>
    <view wx:elif="{{false}}">bbb</view>
    <view wx:else>ccc</view>

</view>

• hidden

<!-- 
    hidden
      1、在標(biāo)簽上直接加入屬性hidden
      2、hidden="{{true}}"
 -->
 <view>
    <view>-----------------------</view>
    <view>hidden</view>
    <view hidden >hidden</view>
    <view hidden="{{true}}">hidden</view>  
    <view hidden="{{false}}">hidden</view>
</view>

場景如何選擇？

1、當(dāng)標(biāo)簽不是頻繁的切換顯示，優(yōu)先使用wx:if
wx:if：直接將標(biāo)簽從頁面結(jié)構(gòu)中移除
2、當(dāng)標(biāo)簽頻繁的切換顯示的時候，優(yōu)先使用hidden
hidden：通過添加樣式的方式來切換顯示(display:none;)
因此hidden屬性不要和display一起使用