vue如何实现同个按钮控制展开和折叠同个事件

小编这次要给大家分享的是vue如何实现同个按钮控制展开和折叠同个事件,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

我就废话不多说了,大家还是直接看代码吧~

& lt; el-button:图标=?moreshow & # 39; el-icon-arrow-down& # 39;: & # 39; el-icon-arrow-up& # 39;“@click=癵etmoreshow"在{{!moreshow更多:隐藏}}& lt;/el-button>

数据(){ 　　返回{ 　　moreshow:假的, 　　数:1 　　} 　　} 安装(){ 　　this.getmoreshow()//避免点击两次才生效 　　}, 　　方法:{ 　　getmoreshow () { 　　如果(this.count % 2==0) { 　　this.moreshow=true 　　其他}{ 　　this.moreshow=false 　　} 　　this.count + + 　　}, 　　}

<>强vue可折叠面板的工作区组件

这个组件中使用了elementui的两个图标

组件Js:

Vue.component (& # 39; work-container& # 39;, { 　　道具:[& # 39;高度# 39;], 　　数据:函数(){ 　　返回{ 　　isCollapse:假 　　} 　　}, 　　计算:{ 　　topbarcssobj:函数(){ 　　var obj={填充:& # 39;3 px # 39;}; 　　如果(this.isCollapse) { 　　obj。=& # 39;显示没有# 39;; 　　} 　　其他{ 　　obj。=& # 39;显示块# 39;; 　　如果(this.height) { 　　obj。身高=Ｉ砀? & # 39;px # 39;; 　　其他}{ 　　obj。身高=& # 39;40 px # 39;; 　　} 　　} 　　返回obj; 　　}, 　　btniconcssobj:函数(){ 　　返回。isCollapse, # 63;& # 39;el-icon-caret-bottom& # 39;:& # 39;el-icon-caret-top& # 39;; 　　}, 　　strview:函数(){ 　　返回。isCollapse, # 63;& # 39;显示& # 39;:& # 39;隐藏& # 39;; 　　} 　　}, 　　方法:{ 　　togglebar:函数(){ 　　这一点。isCollapse=! this.isCollapse; 　　} 　　}, 　　模板:& # 39;& lt; el-container> \ 　　& lt; el-header v-bind:祝辞\ 　　& lt;槽的名字=皌bar"祝辞& lt;/slot> \ 　　& lt;/el-header> \ 　　& lt; el-main> \ 　　& lt; div祝辞\ 　　& lt; div v:点击=皌ogglebar"祝辞\ 　　& lt;我v-bind:类=癰tniconcssobj"在{{strview}}查询条件& lt;/i> \ 　　& lt;/div> \ 　　& lt; div> \ 　　& lt;槽的名字=癰tn"祝辞& lt;/slot> \ 　　& lt;/div> \ 　　& lt;/div> \ 　　& lt; div> \ 　　& lt;槽的名字=耙丫鐾曜４? lt;/slot> \ 　　& lt;/div> \ 　　& lt;/el-main> \ 　　& lt;/el-container> & # 39; 　　});

调用:

& lt;脚本https://www.yisu.com/zixun/src=" ~//vue脚本/workcontainer.js "> 　　 　　 　　<模板v-slot: tbar> 　　 　　 　　 　　 　　 　　<模板v-slot:工作> 　　{{规范}} 　　{{禁令}} 　　{{年级}} 　　 　　

看完这篇关于vue如何实现同个按钮控制展开和折叠同个事件的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。

vue如何实现同个按钮控制展开和折叠同个事件