有時候你會把prop傳遞給一個組件,然後你想要將那個prop值作為類名使用。該如何做呢?

假設你有一個Car組件。

你想要根據一個prop來添加一個類名到組件的輸出結果中。

所以也許這個prop叫做color,你在應用的其他地方使用它的範例如下:

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

在你的Car組件中,你首先需要聲明color prop:

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

然後你可以在模板部分使用它:

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

如果你想要添加一個car類,再加上根據color prop決定的類,你可以使用以下語法:

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

祝你編程愉快!