Vue的条件渲染

最新推荐文章于 2023-06-10 23:34:24 发布

weixin_44346827

最新推荐文章于 2023-06-10 23:34:24 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44346827/article/details/90234340

本文深入探讨Vue中的条件渲染，包括v-if和v-show指令的使用，以及如何在不同的条件下显示或隐藏DOM元素。通过示例代码，展示了如何根据变量状态切换不同的UI组件，以及在动态内容更新时的性能考量。

<!DOCTYPE html>
<html>
<head>
	<title>Vue的条件渲染</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
	
</head>
<body>
	<div id="app">
		<div v-if="show">
			this is A 用户名:<input key="ni">
		</div>
		<div v-else>
			this is B 邮箱:<input key="zhang">
		</div>
		<!-- <div v-if="show=='b'">
			<span>{{msg}}</span>
		</div>
		<div v-else-if="show=='a'">
			<span>{{msgs}}</span>
		</div>
		<div v-else>
			<span>{{msgs}}</span>
		</div>
		<div v-show="content">
			<span>{{msg}}</span>
		</div> -->
	</div>
</body>
 <script type="text/javascript">
 	//v-if 判断这个标签是否存在；中间不能有其他的元素替代；
 	//v-show 判断,
 	//如果有一个input的时候，vue会寻找前面的demo相同的，就不会情况了，如果情况需要加内置的key;
 	var app=new Vue({
 		el:"#app",
 		data:{
 			content:false,
 			msg:"张三",
 			msgs:"dsnlk",
 			show:false

 		},
 		methods:{
 			
 		}
 		
 	})
 	
 </script>
</html>

注意，input需要加内置key不然会寻找渲染前面的input