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