好资源导航 » 文章资讯 » vue同个按钮控制展开和折叠同个事件操作

vue同个按钮控制展开和折叠同个事件操作

2023-07-19 16:41:04 82

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

{{!moreshow?更多:隐藏}}

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(){
varobj={padding:'3px'};
if(this.isCollapse){
obj.display='none';
}
else{
obj.display='block';
if(this.height){
obj.height=this.height+'px';
}else{
obj.height='40px';
}
}
returnobj;
},
btniconcssobj:function(){
returnthis.isCollapse?'el-icon-caret-bottom':'el-icon-caret-top';
},
strview:function(){
returnthis.isCollapse?'显示':'隐藏';
}
},
methods:{
togglebar:function(){
this.isCollapse=!this.isCollapse;
}
},
template:'\
\
\
\
\
\
\
{{strview}}查询条件\

\ \

\ \ ' });

调用：











{{spec}}
{{ban}}
{{grade}}

以上这篇vue同个按钮控制展开和折叠同个事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue同个按钮控制展开和折叠同个事件操作

热门推荐

随机推荐