/

Vue中如何將prop作為類名使用

Vue中如何將prop作為類名使用

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

假設你有一個Car組件。

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

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

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

在你的Car組件中，你首先需要聲明color prop：

1
2
3
4
5
6
7
8
<script>
export default {
 name: 'Car',
 props: {
 color: String
 }
}
</script>

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

1
2
3
<template>
 <div :class="color"></div>
</template>

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

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

祝你編程愉快！

tags: [“Vue.js”, “props”, “class binding”]