留意 use
中的写法
<svg class="icon" aria-hidden="true" :color="item.color" style="font-size:1.8em;"> <use :xlink:href="`#${item.icon}`" /> </svg>
template
<v-list flat class="margin-top-10 list-border"> <v-list-item-group v-model="item" color="primary"> <template v-for="(item, i) in items"> <v-list-item @click="itemClick(item)" :key="i" class="item-border"> <v-list-item-icon style="margin-right:16px;"> <svg class="icon" aria-hidden="true" :color="item.color" style="font-size:1.8em;"> <use :xlink:href="`#${item.icon}`" /> </svg> </v-list-item-icon> <v-list-item-content style> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> <svg class="icon" color="grey" aria-hidden="true" style="font-size:1.6em;"> <use xlink:href="#iconxiayibu" /> </svg> </v-list-item> </template> </v-list-item-group> </v-list>
script
items: [ { text: '会员', icon: 'iconCard', path: '/pay', color: '#ff7f50' }, { text: '订单', icon: 'iconi-order', path: '/order', color: '#64d56c' }, { text: '关于', icon: 'iconabout', path: '/about', color: '#ffa500' }, { text: '帮助', icon: 'iconbangzhu', path: '/help', color: '#67a2d4' }, { text: '意见反馈', icon: 'iconmessage2', path: '/suggestion', color: '#f37e55' } ]