前言
接口返回的list信息,每个list在页面的颜色显示不一样,包括字体颜色呀、项目符号呀(类似无序列表前面的小点点)等等。
下面看一下两种写法
一:不用less循环编写css
首先肯定是要用for循环处理list输出内容,考虑颜色不一致,就定义了一些颜色变量,循环list的时候给每一项设置不同的class名(以id结尾的class name),然后分别给每一项编写不同的css。会是如下的情况
<template>
<div v-for="item in list" :key="item.id">
<span :class="`symbol-${item.id}`">
{{item.id}}
</span>
</div>
</template>
// list 大概这样
list: [
{
id: 'A01'
},
{
id: 'A02'
},
{
id: 'A03'
},
{
id: 'A04'
},
{
id: 'A05'
},
]
<style lang='less' rel='stylesheet/less' scoped>
.symbol-A01 {
background: #4760f0;
}
.symbol-A02 {
background: #ff7249;
}
.symbol-A03 {
background: #9c60fd;
}
.symbol-A04 {
background: #49deff;
}
.symbol-A05 {
background: #7da1fe;
}
</style>
发现写了很多重复性的东西 ,本能的想到可以通过循环处理。Less早就考虑到了,来看一下怎么实现吧
二:less循环输出样式
难点在于循环输出对变量的引用
// 定义颜色变量
@A01: #4760f0;
@A02: #ff7249;
@A03: #9c60fd;
@A04: #49deff;
@A05: #7da1fe;
.loopSymbol(@count) when (@count > 0) {
.loopSymbol((@count - 1));
.symbol-A0@{count} {
// background: '@{A0@{count}}'; // 这种写法输出的色值带引号: background: '#4760f0';
@id:'A0@{count}';
background: @@id; // 引用
}
}
.loopSymbol(5);
代码说明:首先定义颜色变量,然后代码整体的效果就是通过循环变量控制输出不同的 class style。
class name可以通过变量控制,比较难办的是在background属性值的处理上,**要根据循环输出变量的同时,引用事先定义好的颜色变量**
搞定,是不是看着挺高级的。
这样写也方便管理颜色变量,如果ui有变化的话,直接修改变量就好了
输出效果展示
下面,看一下上面less代码的输出
# 全局安装less
npm install less -g
# 进入项目目录,编译less文件
lessc index.less index.css
查看输出的index.css文件
.symbol-A01 {
background: #4760f0;
}
.symbol-A02 {
background: #ff7249;
}
.symbol-A03 {
background: #9c60fd;
}
.symbol-A04 {
background: #49deff;
}
.symbol-A05 {
background: #7da1fe;
}
更多请看掘金
关注我,你会发现一个踏实努力的宝藏前端 ,让我们一起学习,共同成长吧。
喜欢的小伙伴记得点赞关注收藏哟,回看不迷路
欢迎大家转发、评论交流
蟹蟹