有時候你會把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>
祝你編程愉快!