1. 迭代陣列

   
   <ul>
     <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
   </ul>

2. 迭代物件中的屬性

   <!-- 迴圈遍歷物件身上的屬性 -->
   
   <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3. 迭代數字

   <p v-for="i in 10">這是第 {{i}} 個P標籤</p>

2.2.0+ 的版本里，當在元件中使用 v-for 時，key 現在是必須的。

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用 “就地複用” 策略。如果資料項的順序被改變，Vue將不是移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。

Vue指令之v-if和v-show
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。
品牌管理案例新增新品牌刪除品牌根據條件篩選品牌
1.x 版本中的filterBy指令，在2.x中已經被廢除：

filterBy - 指令

<tr v-for="item in list | filterBy searchName in 'name'">

  <td>{{item.id}}</td>

  <td>{{item.name}}</td>

  <td>{{item.ctime}}</td>

  <td>

    <a href="#" @click.prevent="del(item.id)">刪除</a>

  </td>

</tr>

在2.x版本中手動實現篩選的方式：

篩選框繫結到 VM 例項中的 searchName 屬性：

<hr> 輸入篩選名稱：

<input type="text" v-model="searchName">

在使用 v-for 指令迴圈每一行資料的時候，不再直接 item in list，而是 in 一個 過濾的methods 方法，同時，把過濾條件searchName傳遞進去：

search 過濾方法中，使用 陣列的 filter 方法進行過濾：

search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;

  });

}