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

<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ǔ)充知識(shí)：vue 可折疊面板的工作區(qū)組件

這個(gè)組件中使用了elementui的兩個(gè)圖標(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.aoyou183.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同個(gè)按鈕控制展開和折疊同個(gè)事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。