Vue：绑定动态和静态类答案

【问题标题】：Vue: bind dynamic and static classesVue：绑定动态和静态类
【发布时间】：2021-05-23 19:09:14
【问题描述】：

对 Vue 有点陌生，所以我正在寻找一种更好的方法（如果有的话）来设置默认类，而不用两次使用 class 属性。

Component.vue

<template>
    <input class="form__control" :class="class" v-bind="$attrs"/>
<template>

<script>
  export default {
     props: ['class']
}
<script>

用法

<component class="big-red" data-id="1" type="text"/>

【问题讨论】：

此外，如果您在组件上设置了一个类，就像您所做的那样，它将应用于组件元素，像在您的示例中一样输入，因此将类作为道具传递是多余的，您也可以抓住类并将其应用到组件内的其他位置，this.classList = this.$el.classList.value; this.$el.classList = [] 然后在元素 :class="['form__control', classList]"

标签： vue.js

【解决方案1】：

您可以使用数组声明在单个属性中绑定动态和静态类：

 <template>
    <input :class="['form__control', class]" v-bind="$attrs"/>
<template>

【讨论】：