vue的成績判斷

案例：

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中。