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

<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()//避免點(diǎn)擊兩次才生效},methods: { getmoreshow(){ if(this.count%2==0){ this.moreshow=true }else{ this.moreshow=false } this.count++ },}

補(bǔ)充知識：vue 可折疊面板的工作區(qū)組件

這個組件中使用了elementui的兩個圖標(biāo)

組件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>’});

調(diào)用：

<script src='http://www.lshqa.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同個按鈕控制展開和折疊同個事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。