1. v-if

1. v-if指令條件性地渲染一塊內(nèi)容，只有在指令表達(dá)式返回truthy才會渲染。‘
2. 在<template>元素上使用v-if渲染分組元素。<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template>
3. 還可以使用v-else和v-else-if搭配v-if使用。
4. 使用key管理復(fù)用的元素。
   例如用戶在不同的登錄方式之間切換：

   <template v-if="loginType === 'username'">
     <label>Username</label>
     <input placeholder="Enter your username">
   </template>  
   <template v-else>
     <label>Email</label>
     <input placeholder="Enter your email address">  
   </template>
   

   在切換登陸方式時不會清除掉已經(jīng)輸入的內(nèi)容，因為兩個模板使用了相同的元素。input不會別替換--僅僅替換掉他的placeholder。
   為了不復(fù)用placeholder，只需添加一個具有唯一值的key屬性即可。

   <template v-if="loginType === 'username'">
     <label>Username</label>
     <input placeholder="Enter your username" key="username-input">
   </template>  
   <template v-else>
     <label>Email</label>
     <input placeholder="Enter your email address" key="email-input">  
   </template>
   

5. v-show：始終會被渲染并保存在DOM中，v-show只是簡單地切換元素的
   CSS的display屬性。v-show不支持<template>元素，也不支持v-else。
6. 不推薦v-if與v-for一起使用，當(dāng)一起使用時，v-for具有更高的優(yōu)先級。

2. v-for

1. 基于一個數(shù)組渲染一個列表，v-for使用item in items的格式，其中items為數(shù)據(jù)數(shù)組，item迭代對象。
   格式例如：

   <ul id="example-1">
       <li v-for="item in items">
           {{item.message}}
       </li>
   </ul>
       data: {
           items:[
               {message: "Foo"},
               {message: "Bar"}
           ]
         }
   

2. v-for可以訪問所有父作用域的屬性，以及支持可選參數(shù)：迭代對象的索引。

   <li v-for="(item, index) in items">
     {{ parentMessage }} - {{ index }} - {{ item.message }}
   </li>
   data: {
       parentMessage: 'Parent',
       items: [
           { message: 'Foo' },
           { message: 'Bar' }
       ]
   }
   

3. v-for訪問對象的所有元素，包含三個屬性，示例如下：

   <div v-for="(value, name, index) in object">
       {{ index }}. {{ name }}: {{ value }}
   </div>
   

4. 數(shù)組的變化方法包括：(改變原始數(shù)組)
   • push(item)
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()
5. 數(shù)組的替換方法：返回一個新數(shù)組
   • filter()
   • concat()
   • slice()
6. 數(shù)組變化：Vue不能檢測出使用索引直接設(shè)置數(shù)據(jù)項和修改數(shù)組長度的變動，例如：vm.items[indexOfItem]=newValue和vm.items.length=newLength，這兩種都不是響應(yīng)式的。為了變成響應(yīng)式的，需要使用特殊函數(shù)處理。
   • 索引直接設(shè)置數(shù)據(jù)項，使用Vue.set全局方法和vm.items.splice這兩種方法解決。例如：Vue,.set(vm.item, indexOfItem, newValue)和vm.items.splice(indexOfItem, 1, newValue)，也可以使用vm.$set實例方法，此方法是全局方法Vue.set的一個別名。
   • 修改數(shù)組長度，直接使用vm.items.splice(newLength)解決。
7. 對象變化：Vue不能檢測對象屬性的添加和刪除。并且對于已經(jīng)創(chuàng)建的實例，Vue不允許動態(tài)添加根級別的響應(yīng)式屬性，即不允許在data屬性中添加元素，不過可以使用Vue.set(object, propertyName, Value)向嵌套對象添加響應(yīng)式屬性。

   data: {
     userProfile: {
       name: 'Anika'
     }
   }
   Vue.set(vm.userProfile, "age", 27)
   

   對已有的對象賦值多個新屬性：將多個屬性作為一個新對象。

   vm.userProfile = Object.assign({}, vm.userProfile, {
    age: 27,
    favoriteColor: 'Vue Green'
   })
   

8. 返回數(shù)組過濾或者排序后結(jié)果：
   不改變或者重置原始數(shù)據(jù)，而是顯示一個經(jīng)過過濾或者排序后的數(shù)組，使用計算屬性。

   <li v-for="n in evenNumbers">{{ n }}</li>
   data: {
     numbers: [ 1, 2, 3, 4, 5 ]
   },
   computed: {
       evenNumbers: function () {
         return this.numbers.filter(function (number) {
             return number % 2 === 0
       })
     }
   }
   

9. v-for 也可以接受整數(shù)。在這種情況下，它會把模板重復(fù)對應(yīng)次數(shù)。
   <div><span v-for="n in 10">{{ n }} </span></div>
   結(jié)果：1-10
10. 類似v-if，使用template渲染一段包含多個元素的內(nèi)容。

    <ul>
        <template v-for="item in items">
            <li>{{ item.msg }}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
    

11. v-for與v-if搭配使用

     <li v-for="todo in todos" v-if="!todo.isComplete">
       {{ todo }}
     </li>
    

    只渲染未完成的部分。

    <ul v-if="todos.length">
        <li v-for="todo in todos">
          {{ todo }}
        </li>
    </ul>
    <p v-else>No todos left!</p>
    

    有選擇的跳過循環(huán)。