不懂语法,写法粗糙,用作个人小记。
需求原因,展示的按钮分开,会更利于操作。
<!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>
测试效果:
项目效果: