Vue卡列表中不同卡片显示不同背景颜色

Vue卡列表中不同卡片显示不同背景颜色

最近做一个项目的移动端页面，需要完成一个卡列表，不同银行显示不同颜色的问题，一开始考虑过通过识别银行图标色调生成，但最后为了考虑开发成本，只做几种通用的色调。
具体就是用v-for命令遍历，代码

<div class='cardlist' v-for="i in item" :key='index' :class='obj[i.bank]'></div>

在data中写一个item数组

item[{
bank:'工商银行'
}，
{
bank:'农业银行'
}]；

再写一个obj对象:

obj:{
'工商银行':'redtype',
'农业银行':'greentype'
}

然后在style中写如redtype类和greentype类的css,还可以加入其他风格的css,当然如果要处理很多银行的话，就需要将obj单独写一个文件，并还可以写的更详细。
其实这样做很明显不是最好的方案，主要是因为，这些东西，后端是不会做任何事，全部需要前端完成，所以很caodan…

来源：CSDN

作者：wde_rensheng

链接：https://blog.csdn.net/wde_rensheng/article/details/90446587