Vue指令之v-show篇
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
扯到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
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
50
0- 0
已为社区贡献1条内容
所有评论(0)