博客详情

vue中v-if和v-show指令(显示/隐藏) (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 15:37:23 文章分类：vue 阅读(1128) 评论(0)

vue中v-if和v-show指令介绍：

v-if 切换时每次都会删除和创建元素
v-show 切换时不会删除和创建元素，只会设置display属性为none和删display属性

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>Title</title>
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<body>
		
			<div id="app">
		
			<button type="button" @click="flag=!flag"> 切换</button>
		
			<!--v-if 切换时每次都会删除和创建元素-->
		
			<h3 v-if="flag">aaaa</h3>
		
			<!-- v-show 切换时不会删除和创建元素，只会设置display属性为none和删display属性-->
		
			<h3 v-show="flag">bbbb</h3>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",
		
			data:{
		
			flag:true
		
			},
		
			methods:{
		
			}
		
			});
		
			</script>
		
			</html>