条件渲染
- v-if:是否渲染当前元素,
v-else
v-else-if
- v-show:和v-if类似,但是元素始终会被保存到DOM中,只是简单的切换元素的css属性display来控制显示和隐藏
v-if和v-show的区别:
- 什么时候被渲染:v-if是在初始条件为假的时候,什么都不做,每次条件为真的时候,都会重新渲染;v-show是不管初始条件是什么,元素都会被渲染
- v-show:只是简单的操作css的display属性;v-if是删除DOM 元素
- 使用的场景选择:如果是频繁的切换,用v-show;如果是运行之后条件很少改变的,用v-if
典型案例:勾选显示小块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="flag">勾选显示小块
<div class="box" v-if="flag"></div>
<p v-else="flag">小块消失了</p>
<h3>v-show显示小块</h3>
<div class="box" v-show="flag"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag: false
}
})
</script>
</body>
</html>