v-if表达式的值改变时，将某些行为应用到 DOM 上

最新推荐文章于 2024-07-19 10:04:44 发布

weixin_汪汪

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量790

点赞数

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

本文链接：https://blog.csdn.net/weixin_40136343/article/details/109115450

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-if表达式判断

v-if：表达式的值改变时，将某些行为应用到 DOM 上。
这里， v-if 指令将根据表达式 reen 的值(true 或 false )来决定是否插入 p 元素

<div id="app">
<p v-if="reen">如果reen布尔为真，我会显示在这里<p>
</div>
<script>
 new Vue({
 		el:'#app',
 		data:{
 			reen:true
 		}
 })
</script>

执行效果：
在这里插入图片描述

v-else ：写法，判断是否等于3，然后输出对应信息

<div id="app">
<p v-if="reen==3">如果reen等于3，我会显示在这里<p>		<!--if-->
<p v-else="reen==3">___________<p>   <!--else-->
</div>
<script>
 new Vue({
 		el:'#app',
 		data:{
 			reen:3
 		}
 })
</script>

结果：renn赋值为3，输出“如果reen等于3，我会显示在这里”，renn赋值不为3时，输出“___________”。

v-else-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="school">
			<p v-if="student==='A'">一年级</p>
			<p v-else-if="student==='B'">二年级</p>
			<p v-else-if="student==='C'">三年级</p>
			<p v-else>不存在的年级</p>
		</div>
	</body>
	<script>
		const app=new Vue({
			el:'#school',
			data:{
				student:'B'
			}
		})
	</script>
</html>