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> 总是会被替换而不是被修改，因此会触发过渡。
