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

灰太狼 2024-04-18 08:57 75阅读 0赞

## 解决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>

实例代码

<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
                }
              }
    		}，