使用颜色列表 Vue.js 更改每一行的背景颜色答案

【问题标题】：Change background-color for each row using a color list Vue.js使用颜色列表 Vue.js 更改每一行的背景颜色
【发布时间】：2021-01-17 03:14:56
【问题描述】：

我目前正在列出一些颜色。每行有两个跨度，一个带有颜色 Id，另一个将显示颜色示例。

   /* HTML */ 

     <ul>
         <li v-for="(ColorsList, index) in Colors" :key='index'>
            <span>{{ColorsList.COLOR_ID}}</span>
            <span class="test">{{ColorList.COLOR_HEX}}"></span>
         </li>
    </ul>


/* CSS */
.test {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: auto auto;
 background-color:  var(--COLORHEX);
}

我需要使用十六进制来绘制跨度的背景颜色，我发现的一种方法是在 css 中使用变量。但是当每一行都应该有一个唯一的颜色时，这会改变列表中的所有跨度。非常感谢任何形式的帮助。谢谢！

【问题讨论】：

标签： css variables foreach row background-color

【解决方案1】：

您对所有 <span class="test"> 元素使用相同的类，这会导致所有跨度的样式相同。

实际上，在您的情况下，使用inline styles 应该是可以接受的，而没有css 中变量的复杂性。考虑将其更改为：

    <ul>
         <li v-for="(ColorsList, index) in Colors" :key='index'>
            <span>{{ColorsList.COLOR_ID}}</span>
            <span class="test"
             v-bind:style="{ backgroundColor: ColorList.COLOR_HEX }" // note this inline style binding
             >{{ColorList.COLOR_HEX}}"></span>
         </li>
    </ul>

【讨论】：

这对我帮助很大...谢谢！