css动态样式

使用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>