vue 动态style中添加渐变色、背景图

添加动态style中添加渐变色

:style="{background: `linear-gradient(0deg, ${backfn(index)} 0%, ${backfn(index,'r')} 100%)`}"

颜色动态循环方式

backfn(index,type){
    let colorList =  [
        ['#f37575', '#f54d4d'],
        ['#6382fe', '#5173ff'],
        ['#1fc1d4', '#03b1c1'],
        ['#6670fa', '#a46df1'],
        ['#f88a5d', '#f65a49'],
        ['#52e6be', '#26cd9c'],
    ];
    let flag = index;
    let color = "";
    if (index >= colorList.length) {
        flag = index - colorList.length;
    }
    if(type == 'r'){
        color = colorList[flag][0]
    }else {
        color = colorList[flag][1]
    }
    return color}

背景色：

:style="{backgroundImage:`url(${url})`}"