当前位置 博文首页 > ddd295569371的博客:Vue 点击事件触发显示或者隐藏

    ddd295569371的博客:Vue 点击事件触发显示或者隐藏

    作者:[db:作者] 时间:2021-06-15 18:15

    <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='显示';
                     }
                   }
                 }
              })
    

    效果图:

    显示:
    显示图
    效果图:

    隐藏:
    隐藏图

    下一篇:没有了