扯到v-show就不得不说说他老人家和v-if 的藕断丝连了
我先试着扯一扯：
v-if 呢如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中
例如：
代码：
运行后：
浏览器输出：
有没有发现，<h1 v-if="error">Error!</h1>这部分在运行后没有生成
v-show呢如果条件为false，运行后，还是生成了条件为false所在的标签，但是只是让其display属性为none，即该标签不进行显示，看下面的代码:
代码：
运行后：
浏览器输出：
发现没，运行后的代码中有<h1 style="display: none;">Error!</h1>，就是说Erroe!所在的标签还是生成了代码，只是没有进行显示而已，而v-if 如果条件为false，就直接不生成代码，两者之间有本质的区别。
-----------------------------------------------------------------------------------------------------
看完上面的东西，你应该知道v-show是干啥的了，没错他也是根据条件来展示元素的，和v-if的功能类似，他们之间的却别已经在上面说的好像清楚了
具体再来看看v-show
上代码：
<html>
<head>
<meta charset="utf-8">
<title>v-show指令学习</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1> //条件为TRUE，输出
<h1 v-show="error">false!</h1> //条件为false，不输出
<h1 v-show="10>5">10大于5，输出!</h1> //条件为TRUE，输出
<h1 v-show="2>10">不大于10，不输出!</h1> //条件为false，不输出
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
error: false
}
})
</script>
</body>
</html>
输出：
看了上面的例子，更加深刻的理解了v-show的功能，其功能类似于v-if哦！！！
原创不易，转载说明出处：https://blog.csdn.net/Kermit_father