vue中使用scss动态获取JS变量

vue中使用scss动态获取JS变量

需求：

数据：

代码语言：javascript复制

list: [
  {
    title: "Ⅰ级风险",
    color: "#ff3333",
  },
  {
    title: "Ⅱ级风险",
    color: "#ff9554",
  },
  {
    title: "Ⅲ级风险",
    color: "#ba50b0",
  },
  {
    title: "Ⅳ级风险",
    color: "#4885fb",
  },
  {
    title: "无风险",
    color: "#66cc00",
  },
],

实现：

代码语言：javascript复制

<ul>
  <li
		class="item"
    :style="{'--color': item.color,}"
    v-for="(item, index) in list"
  	:key="index"
	>
  	{{ item.title }}
  </li>
</ul>

代码语言：javascript复制

.legend-item {
  font-size: 12px;
  
  &:before {
    position: relative;
    top: 13px;
    left: -16px;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color);
    content: "";
  }
}

效果：

我的博客即将同步至腾讯云 社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1vpd5lkmhcbmp

腾讯云 scss 变量 博客 同步

0 人点赞