08 Vue中的条件渲染v-if 和v-show方法汇总

最新推荐文章于 2023-08-16 16:05:58 发布

技术~子云

最新推荐文章于 2023-08-16 16:05:58 发布

阅读量85

点赞数

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

本文链接：https://blog.csdn.net/davice_li/article/details/127467349

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

v-if 和v-show 的区别测试

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的条件渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 测试一下 v-if 和v-show的区别-->
			<div v-if="show" data-test="v-if">{{message}}</div>
			<div v-show="show" data-test="v-show"> {{message}}</div>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					show:false,
					message:"hello world"
				},
				methods:{
					
				}
			})
		</script>

	</body>
</html>

v-if v-else-if v-else 使用方法使用对比

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的条件渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 测试 v-if  v-else-if   v-else  使用方法-->
			<div v-if="show === 'a'">This is a</div>
			<div v-else-if ="show ==='b'">This is B</div>
			<div v-else>This is other</div>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					show:'a'
					
				},
				methods:{
					
				}
			})
		</script>

	</body>
</html>

三、key 值实现的方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中的条件渲染</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 测试 v-if  v-else-if   v-else  使用方法
			<div v-if="show === 'a'">This is a</div>
			<div v-else-if ="show ==='b'">This is B</div>
			<div v-else>This is other</div>

			-->
			<div v-if="show" >
				用户名：<input type="text" key="username">
			</div>
			<div v-else >
				邮	箱：<input type="text" key="email">
			</div>

		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					show:false
					
				},
				methods:{
					
				}
			})
		</script>

	</body>
</html>