解决Vue的button按钮显示隐藏问题

单个按钮控制显示隐藏

<template>
    <div>
        <div v-if="isshow">{{isshow}}</div>
        <button @click="change()">点击</button>
    </div>
</template>
<script>
    export default({        name:'',
        data(){            return{                isshow:false,
                }
            },        methods:{            change:function(){                this.isshow=!this.isshow
                }
        })
</script>

上面代码可以实现单个控制显示隐藏,但是我想把this.isshow=!this.isshow写在标签上该怎么写?

<template>
    <div>
        <div v-if="isshow">{{isshow}}</div>
        <button @click="isshow = !isshow">点击</button>
    </div>
</template>
<button @click="isshow = !isshow">点击</button>

实例代码

<div class="footer" v-if="showButton"><button @click="showAddComment(1)" :hidden="isHidden">评论</button></div>

data数据
showButton: {},      //条件判断是否显示button按钮 
isHidden:true     //是否隐藏button按钮 

method方法:
 getData(){ //初始数据
          //@author Mike修改增加 getUrlParam('showButton')
          console.log('showButton+++++++='+getUrlParam('showButton'))
          if(getUrlParam('showButton') == 0){
            console.log('进来了++++')
            this.showButton = 0
            if(this.showButton == 0){
              this.isHidden = true
            }
          }else {
            console.log('进来了----')
            this.showButton = 1
            if(this.showButton == 1){
              this.isHidden = false
            }
          }
		},

Logo

前往低代码交流专区

更多推荐