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

Question

我目前正在列出一些颜色。每行有两个跨度，一个带有颜色 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 中的变量。但是当每一行都应该有一个独特的颜色时，这会改变列表中的所有范围。非常感谢任何形式的帮助。谢谢！

Answer 1

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

实际上，在您的情况下，使用 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>

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

Change background-color for each row using a color list Vue.js

css

variables

foreach

row

background-color