04-Vue指令之v-if和v-show

Vue指令：v-if和v-show 显示和隐藏

  • v-if：控制元素的显示和隐藏，通过对元素的添加和删除。可以作用在template上
  • v-else-if：控制元素显示和隐藏。前一个兄弟元素必须有v-if
  • v-else：前一个兄弟元素必须有v-if或v-else-if
  • v-show：控制标签的显示和隐藏，通过操作display:none|block属性控制显示和隐藏，v-show对template标签不起作用，显而易见是因为template标签，没有任何意义，也不会渲染到页面中，只是为了方便填写指令出现的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令之v-if和v-show</title>
	</head>
	<body>
		<div id="app">
			<p v-if="type == 'A'"> 显示A </p>
			<p v-else-if="type == 'B'"> 显示B </p>
			<p v-else-if="type == 'C'"> 显示C </p>
			<p v-else> 显示其他 </p>
			<hr>
			<div v-show="isShow">
				当isShow为false时，这里的内容被隐藏。
			</div>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				type: "C",
				isShow: false
			}
		})
	</script>
</html>

浏览器中的显示结果

PS：如有任何问题，欢迎在下面评论区留言，让我们共同进步，非常感谢！（^o^）v

web前端开发 > Vue
#JavaScript #web前端 #Vue
04-Vue指令之v-if和v-show
https://liaoliaocode.xyz/article/e67d/
作者
Brian.Gao
发布于
2022年4月8日
许可协议