分支结构
- v-if
- v-else-if
- v-else
- v-show
案例
<div id="app">
<div v-if='score>=90'>成绩优秀</div>
<div v-else-if='score>=80'>成绩良好</div>
<div v-else-if='score>=60'>成绩合格</div>
<div v-else>成绩较差</div>
<div v-show='flag'>加油!</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 90,
flag: true
}
});
</script>
先判断score
是否大于等于90,如果条件成立则显示div
的内容,否则继续往下判断。
v-if 和 v-show 的区别
v-if
控制元素是否渲染到页面中v-show
控制元素是否显示到页面中(元素已经渲染到了页面里)