标签：tps else shadow java rip nod head 因此 new
<!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{
width: 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 不管初始条件是什么，元素总是被渲染，并且只是简单的基于CSS样式进行切换。
使用场景选择：
- v-if 有更高的切换开销
- v-show 有更高的渲染开销
因此，如果需要非常频繁的切换，则使用 v-show 比较好，如果在运行后，条件很少改变，则使用 v-if 比较好。
标签：tps else shadow java rip nod head 因此 new
原文地址：https://www.cnblogs.com/wjw1014/p/13384652.html
