Vue框架——分支结构

分支结构

• 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控制元素是否显示到页面中(元素已经渲染到了页面里)