在vue中怎么动态控制 col-xs , col-sm , col-md , col-lg 这些赋值

问题:

例如
这是放大状态下
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :lg="24">
<div class="changezoom">
<span class="demo-span demo-enable" @click="change()">缩小</span>
<span class="demo-span demo-disable" @click="change()">放大</span>
</div>
</el-col>
</el-row>

缩小这个是这样
<el-row :gutter="20">
<el-col :xs="24" :sm="12" >
<div class="changezoom">
<span class="demo-span demo-enable" @click="change()">缩小</span>
<span class="demo-span demo-disable" @click="change()">放大</span>
</div>
</el-col>
</el-row>

这个怎么写代码控制 ？

效果是这样的，默认是全部展开，缩小就是占一半，因为有多列，所有后面的列应该跑上来、

回答1:

原来是想控制框架自带的属性，发现不行，于是自己定义了一个类名，总算可以控制了。实现连接。
https://www.cnblogs.com/xiaohuasan/p/13906766.html

回答2:

给变量动态设置啊？还有给个阈值判断，什么时候下col-xs,col-sm,col-md,col-lg

回答3:

问题描述不太清楚，最好有一个图片之类的。