vue中v-for循环添加图标

在Vue中，可以使用v-for指令将数据循环渲染为多个图标。

首先，我们需要准备一个包含图标名称的数组，例如：

data() {
  return {
    icons: ['icon1', 'icon2', 'icon3']
  }
}

然后，在模板中使用v-for指令将数组中的图标名称循环渲染为图标元素：

<template>
  <div>
    <div v-for="icon in icons" :key="icon">
      <i :class="icon"></i>
    </div>
  </div>
</template>

在上面的代码中，我们通过v-for指令将icons数组中的每个元素保存在变量icon中。然后，我们使用:key指令为每个图标元素提供唯一的key值，以帮助Vue进行元素的追踪和更新。

接下来，我们使用:class指令动态绑定icon变量作为图标元素的class名称。这样，每个图标元素都会根据对应的图标名称添加相应的样式。

通过以上步骤，我们就可以在Vue中使用v-for指令循环渲染图标了。根据icons数组中的元素个数，会渲染出相应数量的图标元素。