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' }
]
目录
相关文章
|
前端开发 JavaScript
使用 JavaScript 和 CSS 做一个图片转 PDF 的转换器
这是一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件。但是,除了图片之外,没有其他文件可以在此处转换为 PDF。我使用 HTML 添加了不同的元素并创建了一个输入框来选择图像。 我们从 HTML 中获得不同类型的输入。其中之一是文件。文件输入将帮助你从设备中选择任何文件。这里我用接受 = &quot;.png, .jpg, .jpeg&quot;仅选择输入中的图像,因此只能选择这些图片。
412 1
使用 JavaScript 和 CSS 做一个图片转 PDF 的转换器
|
并行计算 算法 数据挖掘
geatpy遗传算法包使用介绍
Geatpy是国内几所高校做的一个开源遗传算法包,是一个高性能实用型进化算法工具箱,提供许多已实现的进化算法中各项重要操作的库函数,并提供一个高度模块化、耦合度低的面向对象的进化算法框架,利用“定义问题类 + 调用算法模板”的模式来进行进化优化,可用于求解单目标优化、多目标优化、复杂约束优化、组合优化、混合编码进化优化等。
1414 0
|
7月前
|
网络协议 开发者 Python
深度探索Python Socket编程:从理论到实践,进阶篇带你领略网络编程的魅力!
【7月更文挑战第25天】在网络编程中, Python Socket编程因灵活性强而广受青睐。本文采用问答形式深入探讨其进阶技巧。**问题一**: Socket编程基于TCP/IP,通过创建Socket对象实现通信,支持客户端和服务器间的数据交换。**问题二**: 提升并发处理能力的方法包括多线程(适用于I/O密集型任务)、多进程(绕过GIL限制)和异步IO(asyncio)。**问题三**: 提供了一个使用asyncio库实现的异步Socket服务器示例,展示如何接收及响应客户端消息。通过这些内容,希望能激发读者对网络编程的兴趣并引导进一步探索。
88 4
|
9月前
|
存储 Java 测试技术
滚雪球学Java(08):深入理解Java变量、常量及其作用域
【2月更文挑战第14天】🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!!
149 0
|
机器学习/深度学习 人工智能 自动驾驶
单芯片每秒1000万亿次运算:谷歌TPU原班团队全新AI架构,晶体管性能提升6倍
2016 年底,谷歌 TPU 团队的十位核心开发者中的八位悄悄离职,创办了一家名为 Groq 的机器学习系统公司。在此后的三年里,这家公司一直很低调。但最近,他们带着一款名为 TSP 的芯片架构出现在公众视野里。
260 0
单芯片每秒1000万亿次运算:谷歌TPU原班团队全新AI架构,晶体管性能提升6倍
|
前端开发 API 定位技术
【百度地图API】让用户选择起点和终点的驾车导航
原文:【百度地图API】让用户选择起点和终点的驾车导航 摘要:   如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果。但同一个城市可能有多个机场和火车站,那么,如何用可视化的方法让用户自己选择起点和终点呢?答案是,使用数据接口。
1696 0
|
应用服务中间件 Linux
如何在同一系统里同时启动多个Tomcat
需要在同一系统里启动多个tomcat,应该怎么处理? tomcat是个服务程序,需要占用几个通讯端口,所以默认情况是不能启动多个tomcat,如果要启动多个tomcat,需要修改配置文件,通过在配置文件设置不同的通讯端口就可以做到.文件 %TOMCAT_HOME%/conf/server.xml 是tomcat服务配置文件,里面有很多配置项,本文只关注怎么修改端口,其他配置项的含义不做说明。
1033 0
|
9月前
|
SQL Java 分布式数据库
实时计算 Flink版产品使用合集之可以支持批量写入HBase吗
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
92 2
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖

热门文章

最新文章