v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
v-html
更新元素的
innerHTML。注意：內容按普通HTML插入 - 不會作為Vue模板進行編譯。如果試圖使用v-html組合模板，可以重新考慮是否通過使用組件來替代。
在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊。只在可信內容上使用v-html，永不用在用戶提交的內容上。
在單文件組件里，scoped的樣式不會應用在v-html內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對v-html的內容設置帶作用域的CSS，你可以替換為CSS Modules或用一個額外的全局<style>元素手動設置類似BEM的作用域策略。
<div v-html="html"></div>
v-show
根據表達式之真假值，切換元素的
display CSS property。當條件變化時該指令觸發過渡效果。
另一個用于根據條件展示元素的選項是v-show指令。用法大致一樣：
不同的是帶有v-show的元素始終會被渲染并保留在DOM中。v-show只是簡單地切換元素的CSS property display。
注意，v-show不支持<template>元素，也不支持v-else。
<h1 v-show="ok">Hello!</h1>
v-if
根據表達式的值的
truthiness來有條件地渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀并重建。如果元素是<template>，將提出它的內容作為條件塊。
當條件變化時該指令觸發過渡效果。
當和v-if一起使用時，v-for的優先級比v-if更高。詳見列表渲染教程
v-if是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于CSS進行切換。
一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件很少改變，則使用v-if較好。
不推薦同時使用v-if和v-for。請查閱風格指南以獲取更多信息。
當v-if與v-for一起使用時，v-for具有比v-if更高的優先級。請查閱列表渲染指南以獲取詳細信息。
<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：
<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>
那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。
<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>
現在，每次切換時，輸入框都將被重新渲染。
注意，<label> 元素仍然會被高效地復用，因為它們沒有添加 key attribute。
v-for
基于源數據多次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression，為當前遍歷的元素提供別名：
<div v-for="item in items">{{ item.text }}
</div>
另外也可以為數組索引指定別名 (或者用于對象的鍵)：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for 的默認行為會嘗試原地修改元素而不是移動它們。要強制其重新排序元素，你需要用特殊 attribute key 來提供一個排序提示：
<div v-for="item in items" :key="item.id">{{ item.text }}
</div>
從 2.6 起，
v-for也可以在實現了可迭代協議的值上使用，包括原生的Map和Set。不過應該注意的是Vue 2.x目前并不支持可響應的Map和Set值，所以無法自動探測變更。
我們可以用v-for指令基于一個數組來渲染一個列表。v-for指令需要使用item in items形式的特殊語法，其中items是源數據數組，而item則是被迭代的數組元素的別名。
<ul id="example-1"><li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>
var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})
在
v-for塊中，我們可以訪問所有父作用域的property。v-for還支持一個可選的第二個參數，即當前項的索引。
<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</ul>
var example2 = new Vue({el: '#example-2',data: {parentMessage: 'Parent',items: [{ message: 'Foo' },{ message: 'Bar' }]}
})
你也可以用 of 替代 in 作為分隔符，因為它更接近 JavaScript 迭代器的語法：
<div v-for="item of items"></div>
你也可以用 v-for 來遍歷一個對象的 property。
<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li>
</ul>
new Vue({el: '#v-for-object',data: {object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}
})
還可以用第三個參數作為索引：
<div v-for="(value, name, index) in object">{{ index }}. {{ name }}: {{ value }}
</div>
在遍歷對象時，會按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下都一致。
當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。這個類似 Vue 1.x 的 track-by="$index"。
這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute：
<div v-for="item in items" v-bind:key="item.id"><!-- 內容 -->
</div>
建議盡可能在使用
v-for時提供key attribute，除非遍歷輸出的DOM內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
因為它是Vue識別節點的一個通用機制，key并不僅與v-for特別關聯。后面我們將在指南中看到，它還具有其它用途。
不要使用對象或數組之類的非基本類型值作為v-for的key。請用字符串或數值類型的值。
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素并且盡可能的嘗試就地修改/復用相同類型元素的算法。而使用key時，它會基于key的變化重新排列元素順序，并且會移除key不存在的元素。
有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。
最常見的用例是結合v-for：
<ul><li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于強制替換元素/組件而不是重復使用它。當你遇到如下場景時它可能會很有用：
完整地觸發組件的生命周期鉤子
觸發過渡
<transition><span :key="text">{{ text }}</span>
</transition>
當 text 發生改變時，<span> 總是會被替換而不是被修改，因此會觸發過渡。
