vue初学-条件渲染
2021-01-06 本文已影响0人
普通的一个程序员
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h1 v-show="ifshow">Test v-show</h1>
</div>
<script type="text/javascript" >
var vm=new Vue({
el: "#app",
data: {
type : "B",
ifshow : true
}
});
</script>
</body>
</html>
v-if是真正的条件渲染，确保在切换过程中条件块内的事件监听器喝子组件适当被销毁和重建。v-if也是惰性的， 如果在初始渲染条件为假，则什么都不做，一直到条件第一次变为真，才会开始渲染条件块。
一般来说， v-if切换时开销较大， v-show在渲染时开销较大。如果需要非常频繁的切换，使用v-show较好，否则 v-if更好
实例渲染结果
<html><head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"><div>
B
</div> <h1>Test v-show</h1></div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
type : "B",
ifshow : true
}
});
</script>
</body></html>
