vue 使用v-for循环输出图标

Question

使用v-for循环出一排七个不同的图标

<el-row>
    <el-col :span="3" v-for="(index,item) in 7" style="text-align:center">
        <svg-icon icon-class="user" ></svg-icon>
    </el-col>
</el-row>

####大致代码这个样子的，但是不太懂数据绑定啥的，求大神指点一下萌新

Answer 1

自己先定义图标数据，再在template里面遍历它
javascript

data(){
    return {
        icons:["icon-user","icon-iphone","其他图标样式"]
    }
}

template

<el-row>
    <el-col :span="3" v-for="(index,item) in icons" style="text-align:center">
        <svg-icon :icon-class="item" ></svg-icon>
    </el-col>
</el-row>