在前端開發中，有很多時候都需要使用圖標來進行設計，Vue作為一種非常流行的前端框架，也提供了許多解決方案來應對圖標的展示問題。其中，循環展示圖標是一項比較常用的需求，下面我們就來詳細介紹一下Vue如何實現循環展示圖標。

首先我們需要在Vue中引入圖標庫，這里我們以阿里巴巴的矢量圖標庫Iconfont為例進行介紹。我們需要先在Iconfont官網上選擇需要使用的圖標，并將其下載到本地。接著，我們需要將下載的圖標文件放到Vue項目的assets目錄下，這里我們以“iconfont”文件夾為例。

├── src
│   ├── assets
│   │   ├── iconfont
│   │   │   ├── iconfont.css
│   │   │   ├── iconfont.eot
│   │   │   ├── iconfont.svg
│   │   │   ├── iconfont.ttf
│   │   │   └── iconfont.woff

在項目中引入Iconfont的樣式文件，可以通過在Vue組件的樣式中引入，也可以在index.html文件的head標簽中引入。如下所示：

<link rel="stylesheet" href="./assets/iconfont/iconfont.css">

接著，我們就可以通過在Vue模板中使用“v-for”進行圖標的循環展示。這里我們用一個簡單的例子進行演示，展示三個不同的圖標：

<template>
<div>
<span v-for="(icon,index) in icons" :key="index">
<i :class="icon" />
</span>
</div>
</template>
<script>
export default {
data() {
return {
icons: [
'iconfont icon-youjinbi',
'iconfont icon-wechat',
'iconfont icon-alipay'
]
}
}
}
</script>

在以上代碼中，“v-for”指令用于循環展示icons數組中的元素，每個元素都是一個字符串類型，代表圖標的class類名。在模板中使用“i”標簽來展示圖標，通過“:class”綁定方式將icons數組中的class類名動態傳入，從而實現圖標的動態展示。

對于需要動態修改圖標的場景，Vue提供了“computed”計算屬性來處理。下面我們通過一個簡單的例子進行介紹：

<template>
<div>
<span v-for="(icon,index) in icons" :key="index">
<i :class="getIconClass(index)" />
</span>
</div>
</template>
<script>
export default {
data() {
return {
icons: [
'iconfont icon-youjinbi',
'iconfont icon-wechat',
'iconfont icon-alipay'
]
}
},
computed: {
getIconClass() {
return function(index) {
return this.icons[index]
}
}
}
}
</script>

在以上代碼中，我們增加了一個“computed”計算屬性“getIconClass”，并在模板中使用“getIconClass(index)”來獲取對應的class類名。通過這種方式，我們可以在使用過程中隨時修改“icons”數組中的元素，從而實現動態修改圖標的效果。

綜上所述，通過以上方法，我們可以在Vue中比較簡單地實現循環展示圖標的效果，從而滿足前端開發中圖標展示的需求。