Vue中的v-if和v-else

最新推荐文章于 2024-05-14 21:04:35 发布

朱振玉小迷弟

最新推荐文章于 2024-05-14 21:04:35 发布

阅读量4.1w

点赞数 8

分类专栏： Vue学习笔记（带源码）文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_50357864/article/details/115259987

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、v-if和v-else

v-if判断语句之用，v-else则是和v-if一起出现，当v-if判断为true时，v-else不执行；当v-if判断为false时，v-else才执行。
源码01：

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<title>20210327练习</title>
	</head>
	<body>
		<div id="app">
			<h2 v-if="isShow">
				{{message}}
				<div>abcabc</div>
				<div>abc</div>
				<div>abc</div>
				<div>abc</div>
			</h2>
			<h1 v-else>这里为v-if为false时显示</h1>
		</div>
		<script src="./js/vue.js"></script>		<!--引入Vue-->
		<script>
			const app = new Vue({
				el: '#app',
				data:{
					isShow:true
				}
			})
		</script>
	</body>
</html>

二、v-else-if

v-else-if会在多个判断语句时使用到，但不常用。
源码02：

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<title>20210327练习</title>
	</head>
	<body>
		<div id="app">
			<h2 v-if = "score >= 90">优秀</h2>
			<h2 v-else-if = "score >= 80">良好</h2>
			<h2 v-else-if = "score >= 70">较好</h2>
			<h2 v-else-if = "score >= 60">一般</h2>
			<h2 v-else = "score < 60">不及格</h2>
		</div>
		<script src="./js/vue.js"></script>		<!--引入Vue-->
		<script>
			const app = new Vue({
				el: '#app',
				data:{
					score:96
				}
			})
		</script>
	</body>
</html>

但这种方式一般用的较少，因为我们习惯把这些判断语句放在el挂载点中的computed中：
源码03：

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<title>20210327练习</title>
	</head>
	<body>
		<div id="app">
			<h2 v-if = "score >= 90">优秀</h2>
			<h2 v-else-if = "score >= 80">良好</h2>
			<h2 v-else-if = "score >= 70">较好</h2>
			<h2 v-else-if = "score >= 60">一般</h2>
			<h2 v-else = "score < 60">不及格</h2>
			
			<h1>{{result}}</h1>
		</div>
		<script src="./js/vue.js"></script>		<!--引入Vue-->
		<script>
			const app = new Vue({
				el: '#app',
				data:{
					score:96
				},
				computed:{
					result(){
						let showMessage = '';
						if(this.score >= 90){
							showMessage = '优秀'
						} else if (this.score >= 80){
							showMessage = '良好'
						} else if (this.score >= 70){
							showMessage = '较好'
						} else if (this.score >= 60){
							showMessage = '一般'
						} else {
							showMessage = '不及格'
						}
						return showMessage
					}
				}
			})
		</script>
	</body>
</html>

如果判断情况少（逻辑简单），那么使用源码01要方便一些，但如果像源码02和源码03判断情况比较多的时候，那么用源码03比较好。

朱振玉小迷弟

关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
Vue中的v-if和v-else

一、v-if和v-elsev-if判断语句之用，v-else则是和v-if一起出现，当v-if判断为true时，v-else不执行；当v-if判断为false时，v-else才执行。源码01：<!DOCTYPE ><html> <head> <meta charset="utf-8" /> <title>20210327练习</title> </head> <body> <div
复制链接

扫一扫