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教程：