我就廢話不多說了，大家還是直接看代碼吧~

<el-button :icon='!moreshow?’el-icon-arrow-down’:’el-icon-arrow-up’' @click='getmoreshow'>{{!moreshow?更多:隱藏}}</el-button>

data() { return { moreshow:false, count:1, }}

mounted() { this.getmoreshow()//避免點擊兩次才生效},methods: { getmoreshow(){ if(this.count%2==0){ this.moreshow=true }else{ this.moreshow=false } this.count++ },}

補充知識：vue 可折疊面板的工作區組件

這個組件中使用了elementui的兩個圖標

組件Js：

Vue.component(’work-container’, { props: [’height’], data: function () { return { isCollapse: false } }, computed: { topbarcssobj: function () { var obj = { padding: ’3px’ }; if (this.isCollapse) {obj.display = ’none’; } else {obj.display = ’block’;if (this.height) { obj.height = this.height + ’px’;} else { obj.height = ’40px’;} } return obj; }, btniconcssobj: function () { return this.isCollapse ? ’el-icon-caret-bottom’ : ’el-icon-caret-top’; }, strview: function () { return this.isCollapse ? ’顯示’ : ’隱藏’; } }, methods: { togglebar: function () { this.isCollapse = !this.isCollapse; } }, template: ’<el-container> <el-header v-bind:style='topbarcssobj'> <slot name='tbar'></slot> </el-header> <el-main> <div style='margin:3px;'> <div v-on:click='togglebar'> <i v-bind:class='btniconcssobj'>{{strview}}查詢條件</i> </div> <div> <slot name='btn'></slot> </div> </div> <div> <slot name='work'></slot> </div> </el-main> </el-container>’});

調用：

<script src='http://www.4tl426be.cn/bcjs/~/Scripts/vue/workcontainer.js'></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>

以上這篇vue同個按鈕控制展開和折疊同個事件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。