首页 > 其他 > 详细

Vue 按钮点击控制显示隐藏

时间:2019-12-27 11:02:04      阅读:582      评论:0      收藏:0      [点我收藏+]
<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=‘显示‘;
                 }
               }
             }
          })

效果图:

显示:

技术分享图片

 

隐藏:

技术分享图片

Vue 按钮点击控制显示隐藏

原文:https://www.cnblogs.com/a973692898/p/12105928.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!