v-for iconfont

留意 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' }
]