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>