1.v-if 元素的创建与销毁的过程
条件 为true --- 创建
条件 为false --- 销毁 --- 默认开始 - false 不创建不销毁
v-if v-else-if v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<h1 v-if="a !== 1">张三</h1>
<h1 v-else-if="b!==2">王五</h1>
<h1 v-else>李四</h1>
</div>
<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
a:1,
b:2,
bool:true
}
})
</script>
</body>
</html>
<!--
v-if
v-else
v-else-if
-->
2.v-show 元素的显示与隐藏
通过控制css样式中 display属性的值来进行元素的显示与隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<h1 v-show="bool">v-show</h1>
<h1 v-show="a==1">v-show</h1>
<h1 v-show="false">v-show</h1>
</div>
<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
a:1,
b:2,
bool:true
}
})
</script>
</body>
</html>
3.v-if与v-show的区别
操作:
v-if: 将dom元素创建或删除
v-show:控制css中display属性进行显示隐藏
编译条件:
v-if:惰性的,只有表达式为true,进行编译缓存渲染
v-show:无论表达式值是true或者false,都会进行编译缓存渲染
编译过程:
v-if:局部编译,切换时会重建或销毁组件内部的事件监听和子组件
v-show:编译之后基于css进行显示隐藏,dom始终存在
消耗:
v-if:切换消耗高
v-show:首次渲染加载消耗高
应用:
v-if:切换条件较少
v-show:切换条件较多