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

问题描述

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

解决方法

您对所有 <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>

background-color foreach row variables