1，根據(jù)數(shù)據(jù)的length值來切換class類名，以此來變換樣式。

<h2 class="letter-spacing1 activity-title" :class="members.length === 1 ? 'red':'gray'"></h2>

2，根據(jù)數(shù)據(jù)的length值來切換文字內(nèi)容。

<b> {{ members.length === 1 ? "刷新平板撐世界紀(jì)錄" : "挑戰(zhàn)你的平板支撐世界紀(jì)錄"  }}</b>

3，當(dāng)兩個(gè)條件都為true的時(shí)候顯示某元素

<span class="tip" v-if="content.identity == 1 && step == 1">選中隊(duì)員參加運(yùn)動(dòng)項(xiàng)目，未選中為助陣團(tuán)團(tuán)員！</span>

4，當(dāng)1個(gè)條件都為true的時(shí)候顯示某元素

<span class="tip" v-if="headerData.num === 1">還沒有其他團(tuán)員報(bào)名，快點(diǎn)邀請(qǐng)吧~</span>

5，里面用到了vue 2.0的v-for、v-if、表單checkbox

<div class="actual-member fl" v-for="(mem, index) in project.mems">
    // 用label將整個(gè)點(diǎn)擊區(qū)域包裹起來。
    <label :for='mem.id'>
       // 用戶的頭像
       <span class="member-item">
          ![](mem.avatar)
      </span>
      // 用戶的姓名
      <p class="white member-name">{{ mem.name }}</p>
      <!-- 如果當(dāng)前的身份是團(tuán)長(zhǎng)，并且還沒有選隊(duì)員，才顯示下面的多選框 -->
      <div v-if="content.identity === 1 && step == 1">
           // 真正的checkbox透明度為0，隱藏起來，但是checkbox的點(diǎn)擊區(qū)域?yàn)檎麄€(gè)label標(biāo)簽范圍，用戶看到的只有勾選或未勾選的樣式，但實(shí)際還是在點(diǎn)checkbox，所有勾選到的checkbox對(duì)應(yīng)的id值都會(huì)存放在checkedNames中
           <input type="checkbox" style="opacity: 0" :id='mem.id' v-model="checkedNames"
                  :value="mem.id"  v-if="mem.role_id != 1">
          // v-if="mem.role_id != 1" 用來判斷這個(gè)用戶是不是團(tuán)長(zhǎng)的身份，如果是團(tuán)長(zhǎng)的身份就不渲染這個(gè)checkbox。
      
           <span v-if="mem.role_id == 1" class="green-checkbox"></span>
           // 如果用戶是團(tuán)長(zhǎng)身份，直接顯示已勾選的樣式
         
           <span v-else :class="checkedNames.indexOf(mem.id) > -1 ? 'green-checkbox':'gray-checkbox'"></span>
           // 顯示勾選或未勾選的標(biāo)簽
      </div>
  </label>
</div>

6，三個(gè)條件都為true的時(shí)候才渲染

 <button type="button" class="bg-gold white detail-btn"
       v-if="content.identity == 1 && step == 1 && content.num >= 12"
       :class="checkedNames.length === 12 ? '':'gray-btn'"
       @click="submitMemberData">確認(rèn)選擇
</button>

7，通過判斷$route.path來顯示a鏈接

<router-link 
    v-if="$route.path !== '/time-entries/log-time'" 
    to="/time-entries/log-time" 
    class="btn btn-primary">
    創(chuàng)建
</router-link>

• v-if是vue的一個(gè)指令
• $route.path是當(dāng)前路由對(duì)象的路徑，會(huì)被解析為絕對(duì)路徑當(dāng)
• $route.path !=='/time-entries/log-time'為true是顯示，false，為不顯示。
• to 路由跳轉(zhuǎn)地址

8，判斷l(xiāng)ength值，切換顯示或不顯示

<p v-if="!plans.length"><strong>還沒有任何計(jì)劃</strong></p>

9，v-for循環(huán)，注意index的位置

<a class="list-group-item" v-for="(plan, index) in plans"></a>

v-for循環(huán)，注意參數(shù)順序?yàn)?item,index) in items

10，img標(biāo)簽中src屬性的渲染方式

<img :src="plan.avatar" />

• :src屬性，這個(gè)是vue的屬性綁定簡(jiǎn)寫v-bind可以縮寫為:
• 比如a標(biāo)簽的href可以寫為:href，并且在vue的指令里就一定不要寫插值表達(dá)式了(:src={{xx}})，vue自己會(huì)去解析。