Vue 点击事件触发显示或者隐藏

19
五月
2021
<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='显示';
                 }
               }
             }
          })

效果图:

显示:
显示图
效果图:

隐藏:
隐藏图

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员