vue，按钮控制div显示与隐藏

最新推荐文章于 2024-07-26 23:52:22 发布

安康全是山

最新推荐文章于 2024-07-26 23:52:22 发布

阅读量5k

点赞数 4

分类专栏： vue教程

本文链接：https://blog.csdn.net/k912120/article/details/125220161

版权

Vue.js v-show 按钮切换前端开发 JavaScript

关键词由CSDN通过智能技术生成

vue教程专栏收录该内容

21 篇文章 1 订阅

订阅专栏

不懂语法，写法粗糙，用作个人小记。

需求原因，展示的按钮分开，会更利于操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<script src="./public/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-show="conShow">君不见高堂明镜悲白发，朝如青丝暮成雪。</div>
			<button @click="click1" v-show="conShow2">收起</button>
			<button @click="click1" v-show="conShow3">展示</button>
		
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
		    el: '#app',
		    data() {
			  return {
				conShow:true,
				conShow2:true,
				conShow3:false,
			  }
			},
			methods:{
			    click1(){
					this.conShow = !this.conShow;
					this.conShow2 = !this.conShow2;
					this.conShow3 = !this.conShow3;
				},
			}
		});
	</script>
</html>

测试效果：