当前位置：
凯发ag旗舰厅登录网址下载 >
前端技术
> vue
>内容正文
vue
六十七、完成vue项目凯发ag旗舰厅登录网址下载首页图标区域布局和逻辑实现 -凯发ag旗舰厅登录网址下载
凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
六十七、完成vue项目凯发ag旗舰厅登录网址下载首页图标区域布局和逻辑实现
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
| 2020/10/23、 周五、今天又是奋斗的一天。 |
@author：runsen
@date：2020/10/23
写在前面：我是「runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
今天将完成vue项目去哪儿网凯发ag旗舰厅登录网址下载首页图标区域逻辑实现，下面是在本次慕课网完成vue项目去哪儿网凯发ag旗舰厅登录网址下载首页图标区域逻辑实现的总结和感受。
文章目录
- 创建分支
- 在home.vue导入icons组件
- icons.vue
- 推送
在码云项目中，创建一个新的分支index-icons。
然后通过git pull和git checkout index-icons进行图标区域功能的开发。
<template><div class="icons"><swiper><swiper-slide v-for="(page, index) of pages" :key="index"><divclass="icon"v-for="item of page":key="item.id"><div class='icon-img'><img class='icon-img-content' :src='item.imgurl' />div><p class="icon-desc">{{item.desc}}p>div>swiper-slide>swiper>div> template> <script> export default {name: 'homeicons',// 子组件的data必须是函数 es6 data后面有空格data () {return {iconlist: [{id: '0001',imgurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',desc: '景点门票'}, {id: '0002',imgurl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0003',imgurl: 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',desc: '泡温泉'}, {id: '0004',imgurl: 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',desc: '动植园'}, {id: '0005',imgurl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0006',imgurl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0007',imgurl: 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',desc: '泡温泉'}, {id: '0008',imgurl: 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',desc: '动植园'}, {id: '0009',imgurl: 'http://img1.qunarzz.com/piao/fusion/1611/a9/ffc620dbda9b9c02.png',desc: '一日游'}]}},// 计算属性computed: {pages () {const pages = []// foreach遍历iconlist，计算page页数this.iconlist.foreach((item, index) => {const page = math.floor(index / 8)// 这里的pages是两级数组if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}} } script> <style lang="stylus" scoped>@import '~styles/varibles.styl'@import '~styles/mixins.styl'.icons >>> .swiper-containerheight: 0padding-bottom: 50%.iconposition: relativefloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darktextcolorellipsis() //ellipsis这里是限制字体的描述的 style>完成功能需求后，推送到对于的分支，在回到主分支，将开发的分支合并的主分支中，再提交代码到仓库。
在本次课程中，学到使用vue.js devtools插件
参考课程：慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发
| 请一键三连！！！！！ |
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的六十七、完成vue项目凯发ag旗舰厅登录网址下载首页图标区域布局和逻辑实现的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇： 六十六、实现vue项目凯发ag旗舰厅登录网址下载首页轮播图（vue
- 下一篇：