css动态样式

酒渣

于 2025-08-05 16:03:23 发布

阅读量202

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_40923558/article/details/149939543

css 专栏收录该内容

5 篇文章

订阅专栏

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