008_Vue分支结构
作者：互联网
1. 分支结构
1.1. v-if
1.2. v-else
1.3. v-else-if
1.4. v-show
2. 分支结构例子
2.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分支结构</title>
</head>
<body>
<div id="app">
<div>
<span v-if="score>=90">优秀</span>
<span v-else-if="score<90&&score>=80">良好</span>
<span v-else-if="score<80&&score>=70">一般</span>
<span v-else-if="score<70&&score>=60">及格</span>
<span v-else="score<60">不及格</span>
</div>
<div>
<span v-show="flag">v-show控制元素是否显示</span>
<button @click="handle">显示/隐藏</button>
</div>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
score: 100,
flag: true
},
methods: {
handle: function(event) {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>2.2. 效果图
2.3. 点击显示/隐藏按钮
2.4. 再次点击显示/隐藏按钮
2.5. v-if与v-show的区别
2.5.1. v-if控制元素是否渲染到页面。
2.5.2. v-show控制元素是否显示(已经渲染到了页面)。
2.6. v-if分支结构只渲染了一个
2.7. v-show即使是隐藏的, 也会渲染, 实际上就是style="display: none;"。
2.8. 对于频繁需要显示和隐藏的块, 可以使用v-show。
标签：Vue,show,渲染,flag,008,隐藏,2.5,分支 来源： https://blog.csdn.net/aihiao/article/details/122852075