一.v-if
官方的解释为：
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
大家也许会一头雾水，下面由我来给大家解释以下我的理解：
其实，大家可以将awesome看作一个布尔值，它要么为true,要么为false，当为true时，它就执行，为false时，就不执行（当然如果有else,就会执行else中的内容）。
先来看一段代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<h1>用户名：{
{
message}}</h1>
<h1 v-if="VIP">Hello Vue</h1>
<h1 v-else>Hello myVue</h1>
</div>
<script src = "../js/vue.js"></script>
<script type = "text/javascript">
const app = new Vue({
el:"#app",
data:{
message:"Hello message",
VIP :true
}
})
</script>
</body>
</html>
直接运行的结果如下：
在控制台console输入 app.VIP = false 后变成了如下：
如果我们想要切换多个元素，可以在template上使用v-if.如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<template v-if = "VIP">
<h1>Hello</h1>
<h1>World</h1>
</template>
</div>
<script src = "../js/vue.js"></script>
<script type = "text/javascript">
const app = new Vue({
el : "#app",
data : {
message : "Hello",
VIP : true,
}
})
</script>
</body>
</html>
当VIP为false时，两个同时渲染
二.v-show
v-show是另一个用于根据条件展示元素。但是v-show会始终渲染在dom上，只是改变样式，而v-if是真的渲染，它能确保切换过程中事件监听器和子块组适当的销毁和重建。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#css1{
background-color:green;
height:300px;
width:300px;
}
</style>
</head>
<body>
<div id = "app">
<h1 id = "css1" v-show = "VIP">my {
{
message}}</h1>
<button @click = "myShow">myButton</button>
</div>
<script src = "../js/vue.js"></script>
<script type = "text/javascript">
const app = new Vue({
el : "#app",
data : {
message : "Hello",
VIP:true,
},
methods: {
myShow : function(){
app.VIP = !app.VIP;
}
}
})
</script>
</body>
</html>
当我们运行，点击按钮后，打开Elements如下：
我们看到style = “display:none”，样式改变了，但是没有销毁，但是如果是v-if，就看不到这一行，因为它已经销毁了。
三.v-if和v-for的对比
v-if
不显示时，第一次就不渲染，如果内容已经显示，并且变为不显示，则内容直接从dom中去除，适合只渲染一次
v-for
不显示时，就会改为display:none，但会渲染在dom上，适合多次的渲染。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。