如何解决使用颜色列表 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。