Можем ли мы добавить более одного значения в VueJs атрибут «type»?

Question

Я знаю, что это такой нелепый вопрос, но можем ли мы добавить более одного значения в свойство type? Например type="green rounded" или type="danger priority"

Answer 1

Вы можете иметь одно значение для каждого свойства. Например, type="green rounded" все еще одно значение, вам решать, как вы хотите проанализировать это значение.

Я создал быстрое демо, которое имеет type как опору и разделяет его на пробел.

Vue.component("MyModal", {
  template: "<div>{{type ? type.split(' ').join(', ') : 'No Type'}}</div>",
  props: ["type"]
});

new Vue({
  el: "#app"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <My-Modal type="danger red"></My-Modal>
</div>

Answer 2

Вы можете создать пропеллер со строковым типом в вашем компоненте, а затем использовать метод, чтобы проверить, включено ли слово в строку.

Например, проп:

props: {
  type: {
    type: String
  }

}

Создайте функцию, чтобы проверить, включено ли слово:

propIncludes(segment) {
  return this.type.includes(segment);
}

Используйте метод везде, где вы хотите проверить:

<p v-if="propIncludes('first')">First prop</p>
<p v-if="propIncludes('second')">Second prop</p>

И добавить свой новый тип для вашего компонента, просто go для родителя:

<Test type="first second"/>

Я добавил песочницу ниже: https://codesandbox.io/s/heuristic-shamir-o0yk9