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' }
]
目录
相关文章
|
7月前
|
前端开发 Serverless UED
iconfont渐变色实现方案总结
iconfont渐变色实现方案总结
428 0
|
2月前
|
前端开发
Navbar
【10月更文挑战第21天】
15 2
|
前端开发
iconfont字体图标的使用方法
iconfont字体图标的使用方法
|
存储 小程序 开发工具
aui
AUI Kits低代码集成工具是音视频终端SDK提供的基于AUI Kits框架,面向泛娱乐场景的互动直播能力,您可以根据业务需求复用AUI Kits低代码集成工具中的功能模块,快速搭建互动直播、电商直播等功能,降低研发成本和周期,提升业务效果。
136 1
|
开发框架 前端开发 开发工具
AUI1.0
AUI1.0是阿里云提供的一款移动应用UI组件库,旨在为移动应用开发者提供高品质、易于使用的UI组件,帮助开发者快速构建美观、易用的移动应用程序。AUI1.0包含了多种UI组件,如按钮、文本框、列表、弹框、下拉框等,可以满足各种移动应用的UI需求。
164 0
|
存储 JavaScript
ICONFONT字体图标库使用
ICONFONT字体图标库使用
333 0
|
前端开发
iconfont的使用(详细介绍)
iconfont的使用(详细介绍)
580 0
iconfont的使用(详细介绍)
|
前端开发
1、CSS中iconfont 彩色图标使用详解
1、CSS中iconfont 彩色图标使用详解
403 0
1、CSS中iconfont 彩色图标使用详解
|
前端开发
CSS - Iconfont
CSS - Iconfont
263 0
CSS - Iconfont
|
前端开发
layui字体图标
字体图标 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。
6289 0