我们可以在 VueJ 的“type”属性中添加多个值吗？答案

【问题标题】：Can we add more than one value in VueJs "type" attribute?我们可以在 VueJ 的“type”属性中添加多个值吗？
【发布时间】：2020-05-04 10:32:20
【问题描述】：

我知道这是一个非常荒谬的问题，但是我们可以在 'type' 属性中添加多个值吗？如type="green rounded"或type="danger priority"

【问题讨论】：

您能提供更多的上下文吗？你指的是什么type 属性？
比如我有自己的组件叫MyModal，自定义如下：<MyModal type="success" class="b-mobile-center b-desktop-center"> 'success'后面可以输入其他类型吗？
这取决于你如何使用type。如果它被配置为组件的属性，那么type="green rounded" 将导致模态的type 属性具有字符串值'green rounded'。您的组件是否理解这取决于您如何编写该组件。 Vue 不会对它有任何更深的理解，它只是看到整个字符串。在这方面它与 class 不同，Vue 确实理解。

标签： javascript html css vue.js oop

【解决方案1】：

你可以在你的组件中创建一个字符串类型的道具，然后使用一个方法来检查这个词是否包含在字符串中。

例如道具：

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>

要将新类型添加到组件中，只需转到父组件：

<Test type="first second"/>

我在下面添加了沙箱： https://codesandbox.io/s/heuristic-shamir-o0yk9

【讨论】：

@AvocadoFriedEgg 这回答了你原来的问题吗？

【解决方案2】：

您可以为每个属性设置一个值。例如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>

【讨论】：