标签：color data 一个 const 优秀 现在 col font 成绩
案例：
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中。
标签：color data 一个 const 优秀 现在 col font 成绩
原文地址：https://www.cnblogs.com/zouhuixiang/p/12988489.html
