v-if&v-show

panzm_csdn

于 2018-06-22 11:51:05 发布

阅读量269

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/panzm_csdn/article/details/80771776

版权

Vue.js 专栏收录该内容

16 篇文章

订阅专栏

今天来说一下vue中 v-if 和 v-show 的区别！

一、v-if 和 v-show 在页面都展示为显示隐藏，但是它两有这本质的区别。
例如：<div v-if=""></div>
不同点：

1 . v-if 当值为 true时，显示div ，当值为false时，改元素消失，代码也会消失，相当于将代码删除了，当在为true时，页面会重新渲染div;
而v-show 控制的隐藏出现，只是将css属性设为了display：none 或block;

2.v-if 后还有 v-else 和 v-else-if 条件渲染，这里需要注意的是v-else 必须紧跟 v-if 或v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-if</title>
	<script src="../vuejs/vue.min-1.0.28.js"></script>
</head>
<body>
	<div id="app">
		<span v-if='falg'>显示</span>
		<span v-else>不显示</span>
		<span v-show='falg'>show</span>
	</div>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{falg:!false}
		});
	</script>
</body>
</html>