Vue 点击事件触发显示或者隐藏
<div id="app"><div v-show="isShow">我曾经拥有者一切,转眼间都烟消云散;</div><button @click="click">{{message}}</button></div>先写一个div里面写内容再写一个按钮 写一个@click=“click”方法new Vue({el:"#app"
·
<div id="app">
<div v-show="isShow">我曾经拥有者一切,转眼间都烟消云散;</div>
<button @click="click">{{message}}</button>
</div>
先写一个div 里面写内容
再写一个按钮 写一个@click=“click” 方法
new Vue({
el:"#app",
data:{
isShow:false,
message:'显示'
},
methods:{
click(){
this.isShow = !this.isShow;
if(this.isShow){
this.message='隐藏';
}else{
this.message='显示';
}
}
}
})
效果图:
显示:
效果图:
隐藏:
更多推荐
已为社区贡献2条内容
所有评论(0)