VUE 条件渲染 v-if、v-show
条件指令
- v-if 是否渲染当前元素
- v-else
- v-else-if
- v-show：与 v-if 类似，只是元素始终被渲染并保留在DOM中，只是简单的切换CSS属性display来显示或者隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-条件渲染</title>
<style>
.box{
200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<h3>v-if 条件渲染</h3>
<input v-model="seen" type="checkbox" >勾选后显示红色小块
<div v-if="seen" class="box"></div>
<p v-else="seen">红色小块隐藏了...</p>
<hr>
<h3>v-show 条件渲染</h3>
<div v-show="seen" class="box"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
seen:false
}
})
</script>
</body>
</html>
v-if 和 v-show的比较
-
什么时候元素被渲染：
- v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素。
- v-show 不管初始条件是什么，元素总是被渲染，并且只是简单的基于CSS样式进行切换。 -
使用场景选择：
- v-if 有更高的切换开销
- v-show 有更高的渲染开销
因此，如果需要非常频繁的切换，则使用 v-show 比较好，如果在运行后，条件很少改变，则使用 v-if 比较好。