Vue的条件渲染详解
Posted apebro
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于Vue的条件渲染详解的主要内容，如果未能解决你的问题，请参考以下文章