Vue、クラス名として小道具を使用する方法

小道具をコンポーネントに渡し、その小道具の値をクラス名として使用したい場合があります。どうやってするか？

車のコンポーネントがあるとします。

小道具に基づいて、その出力にクラスを追加したいとします。

だから多分小道具は呼ばれますcolor、そしてあなたはアプリの他の部分でこのようにそれを使用します：

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

Carコンポーネントで、最初にカラープロップを宣言する必要があります。

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

次に、テンプレート部分でそれを使用できます。

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

追加したい場合carクラスに加えて、カラープロップによって決定されるクラスに加えて、次の構文を使用できます。

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

ハッピーコーディング！

私の無料ダウンロードVueハンドブック