vue.js if-else 与 v-show实例

最新推荐文章于 2024-12-17 09:19:18 发布

hlday6

最新推荐文章于 2024-12-17 09:19:18 发布

阅读量206

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/hlday6/article/details/118253306

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

<head>

</head>

<body>
	<div id="mydiv">
		<h1 v-if="isShow">hello world</h1>
		<h1 v-else>other info</h1>

		<input type="button" value="隐藏Helloworld" v-on:click="hidehelloworld">

		<!-- v-show 用法-->
		<h1 v-show="isShow">v-show test hello world</h1>
		<h1 v-show="!isShow">v-show test other info</h1>

	</div>

	<script type="text/javascript" src="vue.js"></script>

	<script type="text/javascript">
		new Vue({
			el:"#mydiv",   //选择器
			data:{
				isShow:true,
			},

			methods:{
				hidehelloworld:function(){
					this.isShow = false;
				}
			}
		});
	</script>

</body>