Vue,如何使用prop作为类名

有时,您将一个prop传递给一个组件,而您想将该prop值用作类名。怎么做?

假设您有一个Car组件。

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

所以也许道具叫做color,您可以在应用程序的其他部分中像这样使用它:

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

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

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

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

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

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

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

祝您编码愉快!

免费下载我的Vue手册


更多vue教程: