vue的成绩判断

Posted zouhuixiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中。

 

以上是关于vue的成绩判断的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板