Vue的条件渲染详解
Vue的条件渲染
v-if、v-else、v-else-if以及v-show的用法
-
v-if的渲染方式：- 会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
- 只有当条件第一次变为真时，才会开始渲染条件块；
- 切换开销比
v-show高；
-
v-show的渲染方式：- 不管初始条件是什么，元素总是会被渲染；
- 只是简单地基于 CSS 进行切换；
v-show的初始渲染开销比v-if高；
如果需要频繁的切换，则使用
v-show；如果运行时条件很少改变，则用
v-if；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比较差</div>
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
分支结构
v-show的原理：控制元素样式是否显示 display:none
*/
var vm = new Vue({
el: '#app',
data: {
score: 80,
flag: false
},
methods: {
handle: function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
