条件渲染指令 v-show 和 v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show和v-if的区别</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="改变显示状态" @click="changeShow">
<!-- v-if操作的是Dom对象 -->
<p v-if="is_Show">马赫好帅啊</p>
<!-- 操作的是样式 -->
<p v-show="is_Show">马赫好帅啊</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
is_Show:false,
},
methods:{
changeShow:function(){
this.is_Show = !this.is_Show;
}
}
})
</script>
</body>
</html>v-show
v-show操作的是样式：
v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
v-show有很高的初始渲染开销，适用于非常频繁地切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeShow">
<input type="button" value="flag加1" @click="add">
<input type="button" value="flag减1" @click="sub"><br/>
<!-- 档v-show的值为true的时候才有效 -->
<img v-show="is_Show" src="img/为了捞钱.png" alt=""/>
<!-- 当flag等于20的时候，图片才会显示 -->
<img v-show="flag==20" src="img/为了捞钱.png" alt="">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
is_Show:false,
flag:18
},
methods:{
changeShow:function(){
this.is_Show = !this.is_Show;
},
add:function(){
this.flag++;
},
sub:function(){
this.flag--;
}
}
})
</script>
</body>
</html>v-if
v-if操作的是DOM对象
v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
v-if有很高的切换开销，适用于条件不太容易改变的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if和v-else-if和v-else</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="type=='A'">A</p>
<p v-else-if="type=='B'">B</p>
<p v-else>C</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
type:'A',
},
})
</script>
</body>
</html>