vue商城项目开发：底部导航样式、顶部导航矩阵和轮播图

底部导航样式修改

第一步：

第二步：

顶部导航矩阵

• v-for取代多次复制

• 字体图标动态传入

• 动态绑定样式

• 添加8个

• {{}}和{}的区别
  {{}}：
  
  不带任何符号：
  
  {}：
  

首页轮播图

准备图片数组：

v-for：下面这种写法图片是无法显示出来的

加上require：

展示下标为指定值的图片：

索引轮播图的实现思路就是：动态改变n的值，让其每隔1秒钟就+1.就实现了轮播的效果了

查看效果：

• 定时器的清除
  当切换到其他页面时，当前页面的定时器应该将其清除掉。
  先定义一个定时器属性：
  
  组件destroyed销毁时调用定时器的清除方法：
  
  轮播点的显示：