想实现功能:点击按钮实现表单的隐藏和现实,但没成功,哪里错了呢?html和js代码如下

想实现功能:点击按钮实现表单的隐藏和现实,但没成功,哪里错了呢?html和js代码如下

问题描述:

html:
<el-button @click="show()" slot="prepend">高级检索</el-button>

js:

methods:{
  show(){
    var t=document.getElementById("advanced_search");
    if(t.style.visibility="hidden")
      t.style.visibility="visible";
    else{
      t.style.visibility="hidden";
    }
  },

可能是if判断少写了一个等于号。不过隐藏可以使用 v-if指令,例如

html:

<el-button @click="show()"  >高级检索</el-button>
<p v-if="showf">要隐藏的区域</p>

js:

 data(){
    return{
      isShow:true
     }
  }
 methods:{
    show(){ 
            this.isShow =  false 
        }
}

既然用VUE了,就不要像JQuery那样直接操作DOM了

借用一下楼上的代码😄

html:

<el-button @click="show()" slot="prepend">高级检索</el-button>

js:

data(){
    return{
      isShow:true
     }
  }
 methods:{
    show(){ 
      this.isShow = !this.isShow; 
    }
}

还少了一行代码

<p v-if="showf">要隐藏的区域</p>

还少了一行代码

<p v-if="isShow">要隐藏的区域</p>