使用scss通過變量設置css動態樣式

<template><div><!-- 方式一 --><p v-for="(item, index) in dataList" :key="index" :style="{'--color': item.color}" >{{item.name}}</p><!-- 方式二 --><p v-for="(item, index) in dataList" :key="index" :style="{'color': item.color}" >{{item.name}}</p></div>
</template><script>
export default {name: "index",data(){return {dataList: [{name: '紅色', color: 'red'},{name: '藍色', color: 'blue'},{name: '綠色', color: 'green'}]}}
}
</script><style scoped lang="scss">
p{color: var(--color);
}</style>