今天在看vue文档的时候，通过浏览器的控制台发现了一件有意思的事情
先不说v-if或者v-show，说说v-model，有这么一段代码：（菜鸟教程传送门）
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>
发现如果把class1的样式改为display: none的时候，也可以实现隐藏显示的效果，这让我想起了v-if和v-show
刚开始学的时候我以为vue在搞什么鬼都是显示与隐藏，为什么搞这么多麻烦，但是打开控制器一看才发现了问题：
v-if实现的显示与隐藏是dom结构里面的有或者没有，也就是说在使用v-if的情况下，浏览器的dom结构没有渲染出这个元素。
当然排除一些特殊的情况，比如用v-if去操作某个元素style的display属性一样会有显示与隐藏的效果，只是运行起来的逻辑和运行内存占比不一样（v-if内存占比比v-show大），下面是代码：（来源于菜鸟教程）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
做出相应的调整之后你就会发现，seen和ok为false的情况下就都是在浏览器里面没渲染出来的
v-show只有display: block/none 但是在浏览器的dom结构中是存在的，也就是说浏览器已经渲染了元素，但是控制样式没有显示而已，多说无益，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="ck">点击</button>
<div v-show="seen">隐藏还是显示呢</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
seen: true
},
methods: {
ck: function () {
this.seen = !this.seen
console.log(this.seen)
}
}
});
</script>
</body>
</html>
那么结果就是div在display:block和none之间更换，单纯做隐藏显示，但是浏览器在初始化页面的时候已经加载了这个dom节点，我感觉这个效率会很高，因为它毕竟运行空间小功能单一，所以会快很多
总结：v-if可以实现布尔值更换，也可嵌套v-else和v-else-if，可以说是功能相比比较齐全，相当于编程语言中的if..else，是渲染或者不渲染，但是v-show只负责操作css的显示和隐藏，并且操作的元素都是浏览器渲染过的。
以上均为博主原创，如有转载，请注明出处和作者！
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)