在业务中有时会出现相同样式不同icon的情况出现，如果我们使用css>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

css">@use 'sass:list';

定义图片初始地址

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

创建图片路径数组

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

for循环创建类名

css">@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;
    }
}