vue3教程：案例-v-for和v-if、v-else-if、v-else联合使用-马育民老师

# 说明

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

# 案例

有学生成绩数组，根据学生分数显示评价，显示如下图：
[![](/upload/0/0/1IX8U30RDKzB.png)](/upload/0/0/1IX8U30RDKzB.png)

```
<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>

```

原文出处：http://malaoshi.top/show_1GWEgiv1qrp.html