vue学习 v-if v-show

最新推荐文章于 2024-04-14 10:00:00 发布

hL？

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量134

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/hL_dont/article/details/89669694

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-show</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--v-show和v-if两个-->
	<div id="app">
		<form>
			<div class="error" v-show="!msg">你必须输入消息v-show</div>
			<div class="error" v-if="!msg">你必须输入消息v-if</div>
			<!--
				v-if和v-show都是作用在整个标签里
				但，
				v-if 是标签是否存在（整个标签删不删除）
				v-show 是标签的隐藏或显示 仅仅是style="display:none/true"
			-->
			<textarea v-model="msg"></textarea>
			<!--如果msg有东西，-->
			<button v-show="msg">发送</button>
		</form>
		<span>{{msg}}</span>
	</div>
	<script>
	new Vue({
		el: '#app',
		data:{
			msg:""
		}
	});
</script>	

	<hr/>

<!--在input里的v-show/v-if-->
	<div id="hi">
		<span v-show="!msg1">cerr</span>
		<input name="text" v-model="msg1" value="msg1">
		<span>{{msg1}}</span>
	</div>
	<script>
		var p1 = new Vue({
			el:"#hi",
			data:{
				msg1:""
			}
		});
	</script>

<hr/>
<!--v-if的其他思路？-->


</body>
</html>