Vue——第二节：条件渲染（v-if&v-show)

最新推荐文章于 2024-07-19 10:16:01 发布

lxl。。

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量720

点赞数 1

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

本文链接：https://blog.csdn.net/lxl513513/article/details/105082150

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1. v-if：

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是true，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

示例：

该示例中用了v-if来渲染条件，当v-if属性内的值为true时，则会显示：用户类型：VIP；如果值为false时，则不会显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript">
		</script>
	</head>
	<body>
		<div id="two">
			<h1>用户名：{{username}}</h1>
			<h3 v-if="isVIP">用户类型：VIP</h3>
			</div>
		<script type="text/javascript">
			let two=new Vue({
				el:'#two',
				data:{
					username:"小明",
					isVIP:true,
					age:24
					}
			})
		</script>
	</body>
</html>

（1）值为true时显示效果：

在这里插入图片描述

（2）值为false时显示效果：

在这里插入图片描述

2.v-else：

必须紧跟v-if当v-if的值为false时，则会显示元素后面的内容

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript">
		</script>
	</head>
	<body>
		<div id="two">
			<h1>用户名：{{username}}</h1>
			<h3 v-if="isVIP">用户类型：VIP</h3>
			<h3 v-else>用户类型：普通用户
			</div>
		<script type="text/javascript">
			let two=new Vue({
				el:'#two',
				data:{
					username:"小明",
					isVIP:false,
					age:24
					}
			})
		</script>
	</body>
</html>

显示效果:

在这里插入图片描述

3.v-else-if:

可以实现多个v-if操作

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="two">
			<h1>用户允许登陆时间</h1>
			<h3 v-if="age>18">允许24小时登陆</h3>
			<h3 v-else-if="age>14">允许8小时登陆</h3>
			<h3 v-else>允许4小时登陆</h3> -->
		</div>
		<script type="text/javascript">
			let two=new Vue({
				el:'#two',
				data:{
					age:24
					}
			})
		</script>
	</body>
</html>

显示效果：

在这里插入图片描述

4.v-show

根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#pane{
				width: 200px;
				height: 200px;
				background: skyblue;
				}
		</style>
	</head>
	<body>
		<div id="app">
			<div  v-show="isShow" id="pane">
				hellovue
			</div>
			<button @click="showPane">切换显示内容</button>
		</div>
		
		<script src="js/vue.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			let app=new Vue({
				el:'#app',
				data:{
					isShow:true
				},
				methods:{
					showPane:function(){
						app.isShow=!app.isShow;
					}
				}
			})	
		</script>
	</body>
</html>