SoFunction
Updated on 2025-04-04

vue same button controls the expansion and collapse of the same event operation

I won't say much nonsense, let's just read the code~

<el-button :icon="!moreshow?'el-icon-arrow-down':'el-icon-arrow-up'" @click="getmoreshow">{{!moreshow?More:Hide}}</el-button>

data() {
  return {
  moreshow:false,
  count:1,
  }
}
mounted() {
  ()//Avoid clicking twice before it takes effect},
methods: {
  getmoreshow(){
  if(%2==0){
   =true
  }else{
   =false
  }
  ++
  },
}

Supplementary knowledge:vue workspace components for foldable panels

Two icons of elementui are used in this component

Component Js:

('work-container', {
  props: ['height'],
  data: function () {
    return {
      isCollapse: false
    }
  },
  computed: {
    topbarcssobj: function () {
      var obj = { padding: '3px' };
      if () {
         = 'none';
      }
      else {
         = 'block';
        if () {
           =  + 'px';
        } else {
           = '40px';
        }
      }
      return obj;
    },
    btniconcssobj: function () {
      return  ? 'el-icon-caret-bottom' : 'el-icon-caret-top';
    },
    strview: function () {
      return  ? 'show' : 'hide';
    }
  },
  methods: {
    togglebar: function () {
       = !;
    }
  },
  template: '&lt;el-container&gt;\
          &lt;el-header v-bind:style="topbarcssobj"&gt;\
          &lt;slot name="tbar"&gt;&lt;/slot&gt;\
          &lt;/el-header&gt;\
          &lt;el-main&gt;\
          &lt;div style="margin:3px;"&gt;\
            &lt;div style="float:left;margin-right:10px;cursor:pointer;color: #d3dce6;display:none;" v-on:click="togglebar"&gt;\
              &lt;i v-bind:class="btniconcssobj"&gt;{{strview}}Query criteria&lt;/i&gt;\
            &lt;/div&gt;\
            &lt;div&gt;\
            &lt;slot name="btn"&gt;&lt;/slot&gt;\
            &lt;/div&gt;\
          &lt;/div&gt;\
          &lt;div&gt;\
            &lt;slot name="work"&gt;&lt;/slot&gt;\
          &lt;/div&gt;\
          &lt;/el-main&gt;\
         &lt;/el-container&gt;'
});

Called:

<script src="~/Scripts/vue/"></script>

 <work-container v-bind:height="80">
    <template v-slot:tbar>
      <spec-combo v-on:selectspec="setSpec"></spec-combo>
      <ban-input v-on:selectban="setBan"></ban-input>
      <grade-input v-on:selectban="setGrade"></grade-input>

    </template>
    <template v-slot:work>
      {{spec}}
      {{ban}}
      {{grade}}
    </template>
  </work-container>

The above article on the Vue button controls the same event operation of the same button are all the content I share with you. I hope you can give you a reference and I hope you can support me more.