上海景点_查公司法人天眼查_最新推广方法_百度指数工具

在业务中有时会出现相同样式不同icon的情况出现，如果我们使用scss中的for循环的话这个问题很好解决

先列出标签结构

<div v-for="item in function_data" :key="item.id" class="signal_btn"><div :class="'btn_avatar' + (item.id + 1)"></div><span>{{ item.title }}</span>
</div>

在css中先引入list

@use 'sass:list';

定义图片初始地址

$base_img_url: "../assets/image/";
$base_icon_url: "../assets/icon/";

创建图片路径数组

$img_list: 
$base_icon_url+'icon_test.png',
$base_icon_url+'icon_fail list.png',
$base_icon_url+'icon_clear.png';

for循环创建类名

@for $i from 1 through list.length($img_list) {$item: list.nth($img_list, $i);.btn_avatar#{$i} {height: 80%;aspect-ratio: 1/1;background-image: url($item);background-size: cover;}
}