Vue.js 从道具创建类&；VueJS中的属性值

我希望在VueJS中创建一个列组件，其外观如下：

<column-i xs="3" md="6" lg="12">
  Some Content
</column-i>

<div class="column xs3 md6 lg12>Some Content</div>

一些内容

呈现时，我希望html标记如下所示：

<column-i xs="3" md="6" lg="12">
  Some Content
</column-i>

<div class="column xs3 md6 lg12>Some Content</div>

---

如果将使用组件的所有属性，则可以使用和
this.$props
获取所有
[键，值]
对的数组。然后，在计算属性中迭代数组以构造将绑定到组件元素的类


const ColumnI={
名称：'column-i'，
模板：``，
//定义将转换为类的道具
道具：{
xs:{
类型：数字，
默认值：null，
},
医学博士：{
类型：数字，
默认值：null，
},
lg：{
类型：数字，
默认值：null，
},
},
计算：{
columnClass（）{
让结果=['column']
//查找所有组件道具，并获取其所有组件道具的数组
//可枚举[键，值]对
for（让Object.entries的[propKey，propValue]（this.$props））{
//如果道具有一个值
if（propValue）{
//将道具作为“”添加到类中
//即，值为3的xs prop将导致“xs3”
result.push（`${propKey}${propValue}`）
}
}
返回结果
},
},
}
新Vue({
el:“#应用程序”，
组成部分：{
专栏,，
}
})
/*
随机样式仅用于演示目的
*/
.栏目{
填充：10px；
}
.xs3{
颜色：淡蓝色；
}
.md6{
背景色：白烟；
}
.lg12{
边框：2个实心番茄；
}

一些内容