案例:
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中。