vue的成绩判断

Posted 2020-12-06 zouhuixiang

案例：

1、给定一个分值，评定等级。

2、大于等于90：优秀，大于等于80：良好，大于等于60：及格，小于60：不及格

思路：

使用Vue中的v-if、v-else-if、v-else语法。

  <div id="app">
        <div v-if="score>=90 &&score<=100">优秀</div>
        <div v-else-if="score>=80 &&score<90">良好</div>
        <div v-else-if="score>=60 &&score<80">及格</div>
        <div v-else-if="score>=0 &&score<60">不及格</div>
        <div v-else>错误</div>
    </div>
<script>
     const app = new Vue({
        el: "#app",
        data: {
            score: -4
        }
    
    })
</script>

总结：

v-if的原理：v-if后面的条件为false时，对应的元素以及其子元素不会渲染，也就是根本不会有对应的标签出现在DOM中。