时间戳

首页 > 解决方案 > 我们可以在 VueJ 的“类型”属性中添加多个值吗？

javascript - 我们可以在 VueJ 的“类型”属性中添加多个值吗？

问题描述

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

标签： javascripthtmlcssvue.jsoop

解决方案

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

例如，道具：

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

推荐阅读