上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-if="flag">v-if指令示例</h3>
<h2 v-show="flag">v-show指令示例</h2>
<button type="button" @click="flag=!flag">按钮</button>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
flag:true,
}
})
</script>
</body>
</html>
效果：
点击按钮：
看到这里，好像v-if和v-for指令的作用没什么差别，效果上都是用来控制标签可见性的，but，让我们按F12打开调试工具：
点击按钮前：
点击按钮后：
发现了么：v-if是通过标签的删减来控制标签可见性的，而v-show是通过设置标签的display属性来控制可见性的。
so,当某个标签偶尔出现/消失在页面上，推荐使用v-if指令；如果某个标签需要频繁的改变其可见性，则推荐使用v-show标签。
| 指令 | 共同点 | 区别 |
|---|---|---|
| v-if | 控制标签可见性 | 通过控制标签的增/减来达到控制标签可见性的目的 |
| v-show | 控制标签可见性 | 通过控制标签的display属性来达到控制标签可见性的目的 |
1480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
