Vue 指令v-if、v-show、v-once和v-cloak
Vue 指令v-if、v-show、v-once和v-cloak
前面两篇文章中总结了v-bind、v-on、v-for、v-model等指令的相关内容，这篇文章将总结v-if、v-show、v-once、v-cloak等指令的内容。
（1）条件渲染：v-if，v-else，v-else-if
v-if条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，下面是v-if的用法示例：
<div id="app">
<div v-if="see">
现在你能看到我，如果改变app.see的值为false，你就看不到我啦！
div>
div>
<script>
var app=new Vue({
el:"#app",
data:{
see:true
}
})
script>
1.在元素上使用v-if条件渲染分组
上面的代码中，v-if只能控制一个元素，要想控制多个元素，可以把当作包裹元素，并在上使用v-if。最终渲染的结果不包含template，如果使用div作为包裹元素，最终渲染的结果会包含div：
<div id="app">
<template v-if="is">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
template>
<div v-if="is">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is:true
},
})
script>
渲染的结果为：
<div id="app">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>
<div>1div>
<div>2div>
<div>3div>
<div>4div>
div>
div>
2.可以使用v-else指令来表示v-if的"else"块：
<div id="app">
<div v-if="is">我是v-if块div>
<div v-else>我是v-else块div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is: true
},
})
script>
渲染结果为：
<div id="app">
<div>我是v-if块div>
div>
v-else的元素必须紧跟在带v-if或者v-else-if的元素后面，否则它不会被识别。
3.可以使用v-else-if充当v-if的的"else-if"块
<div id="app">
<div v-if="is===0">is的值为0div>
<div v-else-if="is===1">is的值为1div>
<div v-else-if="is===2">is的值为2div>
<div v-else-if="is===3">is的值为3div>
<div v-else>is的值不是0，1，2，3中的一个div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is: 1
},
})
script>
渲染的结果为：
<div id="app">
<div>is的值为1div>
div>
v-else-if的元素必须紧跟在带v-if的元素后面，否则它不会被识别。
（2）条件渲染：v-show
v-show的用法与v-if的用法基本上是一致的：
<div id="app">
<div v-show="is">你好！div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is: true
},
})
script>
渲染结果为：
<div id="app">
<div>你好！div>
div>
下面是v-show与v-if的不同：
1.v-show不能在上使用
v-if可以在上使用，控制多个元素；而v-show是不支持的。
<div id="app">
<template v-show="is">
<div>1div>
<div>2div>
<div>3div>
template>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is: false
},
})
script>
<div id="app">
<template v-show="is">
<div>1div>
<div>2div>
<div>3div>
template>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is: true
},
})
script>
无论is的值为false还是true，渲染的结果都是：
<div id="app">
<div>1div>
<div>2div>
<div>3div>
div>
2.v-show切换css的display属性，v-if会让元素销毁和重建
v-show：不管初始条件是true还是false，元素总会被渲染。在true与false相互变化时，它只是简单的切换css的display属性。
v-if：在true与false的切换过程中，会让元素销毁和重建。如果初始条件为false，它什么也不做，直到第一次条件变为true时才会渲染元素，如果之后条件又变为false，那么它会销毁元素。
<div id="app">
<div v-if="is">这个元素使用了v-ifdiv>
<div v-show="is">这个元素使用了v-showdiv>
div>
<script>
var app = new Vue({
el: "#app",
data: {
is: true
},
})
script>
渲染结果为：
<div id="app">
<div>这个元素使用了v-ifdiv>
<div>这个元素使用了v-showdiv>
div>
当app.is的值变为false时，渲染结果为:
<div id="app">
<div style="display:none;">这个元素使用了v-showdiv>
div>
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁地切换条件，使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
（3）v-once
v-once是一个不需要表达式的指令。
定义了v-once的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，当数据改变时，插值处的内容不会再更新，绑定的类、id等也不会更新。
<div id="app" >
<div v-once v-bind:class="left">{{message}}div>
<div v-once><span v-bind:id="left">{{message}}span>div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
left:"up"
},
});
app.message="123";
app.left="down";
script>
渲染的结果为：
<div id="app" >
<div class="up">你好！div>
<div><span id="up">你好！span>div>
div>
（4）v-cloak
v-cloak是一个不需要表达式的指令。
v-cloak 可以防止页面加载时出现 vue.js 的变量名，需要与CSS的display:done一起配合使用。
<div id="app">
{{message}}
div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！"
},
})
script>
对于上面代码，当网速较慢、Vue.js文件还没有加载完成时，页面上会显示{{message}}字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以在网速较慢时，这个过程中屏幕是有闪动的。v-cloak 与CSS的display:done一起配合使用可以解决这个问题：
为元素加上v-cloak指令：
<div id="app" v-cloak>
{{message}}
div>
在CSS中添加：
[v-cloak] {
display: none;
}
以上操作的意思是，包含 v-cloak属性的 html 标签在页面初始化时会被隐藏，在 Vue实例结束编译时，v-cloak 属性会被自动去除，对应的标签就会变为可见。也就不会再出现闪动的问题。
在一般情况下，v-cloak是解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用。但在具有工程化的项目中，可能不再需要v-cloak。
参考：
1.Vue.js官方文档
2.《Vue.js实战》