15. VUE的 v-if、v-else-if、v-else 语句

这三个指令与JavaScript的条件语句if、else、else if类似

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

例如：

<div class="app">
    <p v-if=true > 你考了{{fraction}}分</p>     <!--true 会直接显示-->
    <p v-if=false > 你考了{{fraction}}分</p>    <!--false 不会显示【渲染】-->
</div>

<script>
    const app = new Vue({
        el:".app",
        data:{
            fraction:80     //你考了个80分
        }
    })
</script>

可以是直接写死的 true  和 false  但是也可以是表达式  函数 和计算属性 都可以的 具体自己去测试多去练习

 

配合起来就是这样的：

<div class="app">
        <p v-if="fraction >= 96">优秀</p>
        <p v-else-if="fraction >= 80">良好</p>
        <p v-else-if="fraction >= 60">及格</p>
        <p v-else>不及格</p>
</div>

<script>
    const app = new Vue({
        el:".app",
        data:{
            fraction:80     //你考了个80分
        }
    })
</script>

 

其实就是一个显示和 不显示 的问题  个人感觉如果很多的话 那么很乱 ，这里推荐自己用      计算属性来写   效率高 整洁度也好