说明

本文通过案例讲解 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>
    // 创建vue对象
    const app = new Vue(
    {
        el: '#app', //el是element缩写
        data: { //数据
            students:[
                {
                    "name":"李雷",
                    "score": 90
                },
                {
                    "name":"lucy",
                    "score": 85
                },
                {
                    "name":"lili",
                    "score": 77
                },
                {
                    "name":"韩梅梅",
                    "score": 66
                },
                {
                    "name":"张三",
                    "score": 55
                },
            ]
        }
    })
</script>

原文出处：/show_1IX8U31QE44H.html