Vue，如何使用prop作为类名

Say you have a Car component.

假设您有一个Car组件。

You want to add a class to its output based on a prop.

您要基于道具将类添加到其输出中。

So maybe the prop is called color, and you use it like this in other parts of the app:

因此，该道具可能称为color ，您可以在应用程序的其他部分中像这样使用它：

<Car color="red">
<Car color="blue">

In your Car component you first need to declare the color prop:

在您的Car组件中，您首先需要声明颜色prop：

<script>
export default {
  name: 'Car',
  props: {
    color: String
  }
}
</script>

then you can use it in the template part:

那么您可以在模板部分中使用它：

<template>
  <div :class="color"></div>
</template>

If you want to add a car class, plus the class determined by the color prop, you can use this syntax:

如果要添加car类，再加上由颜色道具确定的类，则可以使用以下语法：

<template>
  <div :class="['car', color]"></div>
</template>

Happy coding!

编码愉快！

翻译自: https://flaviocopes.com/vue-prop-as-class-name/