vue.js从入门到深入再到随心而用———v-if、v-else、v-show的使用以及区别

本文链接：https://blog.csdn.net/qq_42147171/article/details/104999294

v-if、v-else、v-show的使用以及区别

1.v-if和v-else
2.v-if和v-show的差别以及使用

1.v-if和v-else

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="example">
			<p v-if="ok">我是对的</p>如果是真执行if，否则执行v-else语句
			<p v-else="ok">我是错的</p>
		</div>
		
				<script type="text/javascript">
				var example=new Vue({
					el:'#example',
					data:{
						ok:false
					}
				})
		</script>
	</body>
</html>

2.v-if和v-show的差别以及使用

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.min.js" ></script>
	</head>
	<body>
		<div id="example">
			<p v-show="ok">hello!</p>
			<p v-show="greeting">hello!</p>
		</div>
				<script type="text/javascript">
				var example=new Vue({
					el:"#example",
					data:{
						greeting:false,
						ok:false
					}
				})
		</script>
	</body>
</html>