Javascript Vue.js-默认情况下应用类，除非手动添加类？

我刚开始使用Vue.js，我有点想不出这是否可行。鉴于以下组成部分：

<button class="button large primary-gradient">{{ text }}</button>

{{text}

如果可能的话，我希望类“大的主梯度”是有条件的，取决于开发人员以后是否向HTML中的按钮组件添加其他类

例如，如果开发人员编写

<custom-button text="hi"></custom-button>

它应该消失了

<button class="button large primary-gradient">hi</button>

<button class="button medium secondary">hi</button>

hi

但是，如果开发人员编写：

<custom-button class="medium secondary" text="hi"></custom-button>

它应该消失了

<button class="button large primary-gradient">hi</button>

<button class="button medium secondary">hi</button>

hi

---

本质上，我试图为这个按钮组件创建默认的类值，只有当开发人员不添加自己的值时才会使用这些值。在我看来，这应该很容易做到，但我对Vue的有限知识有点妨碍了我。谢谢你的洞察力

最好使用道具来控制：

Vue.component('custom-button', {
  props: {
    text: String,
    size: { type: String, default: 'large' },
    type: { type: String, default: 'primary-gradient' }
  },
  computed: {
    classes: function () {
      return ['button', this.size, this.type].join(' ')
    }
  },
  template: '<button v-bind:class="classes">{{ text }}</button>'
})

Vue.component（'custom-button'{
道具：{
文本：字符串，
大小：{type:String，默认值：'large'}，
类型：{type:String，默认值：'primary gradient'}
},
计算：{
类别：函数（）{
return['button'，this.size，this.type].join（“”）
}
},
模板：“{text}}”
})

用法：

<custom-button size="medium" type="secondary" text="Hi"/>

可以检查是否存在像OP最初要求的那样的类，但此解决方案似乎是一个更好的选择。“正如tam所说，这实际上是一个更好的解决方案！谢谢Jacob，工作非常出色！