AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

重读vue电商网站30之左侧菜单栏图标设计

2022-06-14 299
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 重读vue电商网站30之左侧菜单栏图标设计

我们想要的效果如下：

图片.png

如何设计？


首先，我们可以在 data 中定义一个对象，对应于每一个菜单选项的 id

图片.png

然后通过 for 循环遍历每一个菜单选项的 id即可。

图片.png

文章标签：
JavaScript
关键词：
vue图标VUE.js
图标VUE.js
vue菜单栏VUE.js
VUE.js网站
VUE.js左侧
前端歌谣
目录
相关文章
小宋1021
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
517 1
周一同学Zelina
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont，包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
周一同学Zelina
3539 3
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
wishCoding
195 2
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
wishCoding
231 0
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
wishCoding
172 0
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的浙江艾艺塑业设计公司网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的浙江艾艺塑业设计公司网站附带文章源码部署视频讲解等
wishCoding
128 0
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的国风彩妆网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的国风彩妆网站附带文章源码部署视频讲解等
wishCoding
130 0
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的古风生活体验交流网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的古风生活体验交流网站附带文章源码部署视频讲解等
wishCoding
211 0
34789737
|
9月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
744 2
哇塞女孩
|
8月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
626 137

热门文章

最新文章

  • 1
    VUE之vxe-table高级表格（表格内增删改、导入、导出、自定义打印、列设置隐藏显示等）用法
  • 2
    Vue 环境搭建
  • 3
    vue router 4 源码篇：router history的原生结合
  • 4
    vue的v-if隐藏不了元素失效问题，因为display:none； 失效，所以元素还显示
  • 5
    基于SpringBoot+Vue的科研课题项目管理系统【完整项目源码】
  • 6
    Vue 路由跳转的时候遇到一些图片CSS不加载 解决方案
  • 7
    vue项目打包后自动压缩成zip文件
  • 8
    VUE3.0 解决eslint 报错的4个办法
  • 9
    vue 里 使用 eslint 报错 error：Mixed spaces and tabs (no-mixed-spaces-and-tabs)
  • 10
    vue 里怎么用 axios 实现 post 请求下载文件
  • 1
    Vue 3性能优化
    562
  • 2
    vue中的keep-alive问题（2）
    626
  • 3
    Vue 3
    1055
  • 4
    vue3使用ts传参教程
    636
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    992
  • 6
    Vue中如何实现兄弟组件之间的通信
    744
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    1032
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    511
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    532
  • 10
    vue3循环引用自已实现
    245

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎