说明

本文通过案例讲解 v-for 和 v-if、v-else-if、v-else 联合使用

案例

有学生成绩数组，根据学生分数显示评价，显示如下图：

<div id="app">
    <div v-for=" item in students" :key="item.name">
        姓名：{{item.name}}，分数：{{item.score}}
        评价：
            <span v-if="item.score>=90">优</span>
            <span v-else-if ="item.score>=80">良</span>
            <span v-else-if ="item.score>=70">中</span>
            <span v-else-if ="item.score>=60">差</span>
            <span v-else >不及格</span>

    </div>
</div>

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return { //数据
            students:[
                {
                    "name":"李雷",
                    "score": 90
                },
                {
                    "name":"lucy",
                    "score": 85
                },
                {
                    "name":"lili",
                    "score": 77
                },
                {
                    "name":"韩梅梅",
                    "score": 66
                },
                {
                    "name":"张三",
                    "score": 55
                },
            ]
        }    
    }
  }).mount('#app')
</script>

原文出处：/show_1GWEgiv1qrp.html