vue.js--条件语句 v-else-if

条件语句 v-else-if条件语句 v-else-if指令的作用与JavaScript中elseif语句效果一样，应用指令可以进行更多的判断和输出不同的结果下面从一道经典的题来看看如何使用：将某学校的学生成绩转化为不同等级优秀大于等于90分良好大于等于75分及格大于等于60分不及格小于60分在这里分成四个部分用传统的JavaScript的else if语句想想怎么写！在这里先思考一下其实v-el

Hackers luthiers

1327人浏览 · 2022-03-21 21:08:15

Hackers luthiers · 2022-03-21 21:08:15 发布

条件语句 v-else-if

条件语句 v-else-if指令的作用与JavaScript中else if语句效果一样，应用指令可以进行更多的判断和输出不同的结果
下面从一道经典的题来看看如何使用：
将某学校的学生成绩转化为不同等级
优秀大于等于90分
良好大于等于75分
及格大于等于60分
不及格小于60分
在这里分成四个部分用传统的JavaScript的else if语句想想怎么写！在这里先思考一下
其实v-else-if语句和你所想的没有太大区别。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>判断考试成绩对应的等级</title>
	<script src="../JS/vue.js"></script>
</head>

<body>
	<div id="box">
		<div v-if="score>=90">
			小毅的考试成绩优秀
		</div>
		<div v-else-if="score>=75">
			小毅的考试成绩良好
		</div>
		<div v-else-if="score>=60">
			小毅的考试成绩及格
		</div>
		<div v-else>
			小毅的考试成绩不及格
		</div>
	</div>
	<script type="text/javascript">
		var demo = new Vue({
			el: '#box',
			data: {
				score: 85//输出的具体成绩
			}
		});
	</script>
</body>

</html>