v-for iconfont

简介: 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' }
]
目录
相关文章
|
6月前
|
前端开发 Serverless UED
iconfont渐变色实现方案总结
iconfont渐变色实现方案总结
376 0
|
20天前
|
前端开发
Navbar
【10月更文挑战第21天】
9 2
|
11月前
|
前端开发
iconfont字体图标的使用方法
iconfont字体图标的使用方法
|
存储 小程序 开发工具
aui
AUI Kits低代码集成工具是音视频终端SDK提供的基于AUI Kits框架,面向泛娱乐场景的互动直播能力,您可以根据业务需求复用AUI Kits低代码集成工具中的功能模块,快速搭建互动直播、电商直播等功能,降低研发成本和周期,提升业务效果。
125 1
|
C# 容器 Android开发
WPF字体图标——IconFont
原文:WPF字体图标——IconFont 版权声明:本文为【CSDN博主:松一160】原创文章,未经允许不得转载。 https://blog.csdn.net/songyi160/article/details/54894233 一、字体图标概述 ①字体图标其实就是把矢量图形打包到字体文件里,以后就可以像使用一般外置字体一样的使用它,因此Winform、WPF中都是可以用的。
2503 0
|
开发框架 前端开发 开发工具
AUI1.0
AUI1.0是阿里云提供的一款移动应用UI组件库,旨在为移动应用开发者提供高品质、易于使用的UI组件,帮助开发者快速构建美观、易用的移动应用程序。AUI1.0包含了多种UI组件,如按钮、文本框、列表、弹框、下拉框等,可以满足各种移动应用的UI需求。
160 0
|
存储 JavaScript
ICONFONT字体图标库使用
ICONFONT字体图标库使用
310 0
|
前端开发
iconfont的使用(详细介绍)
iconfont的使用(详细介绍)
561 0
iconfont的使用(详细介绍)
|
前端开发
1、CSS中iconfont 彩色图标使用详解
1、CSS中iconfont 彩色图标使用详解
387 0
1、CSS中iconfont 彩色图标使用详解
|
前端开发
CSS - Iconfont
CSS - Iconfont
251 0
CSS - Iconfont