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

最新推荐文章于 2024-07-23 15:45:06 发布

Hackers luthiers

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量1.2k

点赞数 1

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_57218752/article/details/123646121

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

条件语句 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>

是不是和自己预想差不多。其实很多东西和自己最初的学的东西都是一样的只是写法不太一样而已。

Hackers luthiers

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js--条件语句 v-else-if

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

扫一扫