回答：这里需要用到vue实例里的一个自带属性filters来对数据进行过滤，在vue1.0的时候，filters里面会有自带的过滤器，不过在vue2.0时被移除了，因此需要我们来自己写所需的过滤器的过滤方式：
filters:{ currency(num){ num=num+'' let arr=num.split('.') if (arr.length===1){ return num+'.00' } else { if (arr[1].length===1){ return num+'0' } else return num } } }
只有在渲染页面时，只要对你想进行的数据后加上该过滤器即可：
<div>￥{{list.price | currency}}</div>
2.如何做到下来商品列表就发送对应的请求来更新一页新的商品列表？
回答：这里我们使用到了mint-ui，一个移动端分页效果库，然后我们使用它文档上面对应的infinite scroll的api来达到我们想要的效果，具体代码如下：
<ul data-src="" v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="50" > <li v-for="list in lists" :key="list.id"> <div> <a :href="'/goods.html?id='+list.id" > <div> <img v-bind:src="list.img"> </div> <div> <div>{{list.name}}</div> <div>￥{{list.price | currency}}</div> </div> </a> </div> </li> </ul>
上述代码中，v-infinite-scroll="getList"表示每当下拉到一定距离时就触发methods里面的getList方法；getList方法的具体代码如下所示：
getList(){ if (this.allLoad) return this.loading=true axios.post(url.hostLists,{ pageNum:this.pageNum, pageSize:this.pageSize }).then((response)=>{ let currentList=response.data.lists if (currentList.length<this.pageSize) this.allLoad=true if (this.lists) { this.lists=this.lists.concat(currentList) } else { this.lists=currentList } this.pageNum +=1 this.loading=false }) }
infinite-scroll-disabled="loading"表示效果触发的条件，若loading为false则表示可以触发，若loading为true则表示不能触发，因此当loading为true时我们可以给底部添加一个加载效果，当数据获取完毕，loading变为false时，我们可以通过v-show="loading"来让加载效果消失；infinite-scroll-distance="50"表示下拉的触发距离，设置的数值越大，表示滚动条离底部的触发距离越大，越容易触发。
3.底部导航栏组件
底部导航栏和轮播组件一样，由于可以在其他地方进行复用，因此会把该组件放于components文件夹中，这里值得一提的是，底部导航栏组件由于点击不同的图标，它会跳转到不同的页面，因此会导致导航栏状态的重新加载，因此，若想要在不同的页面让导航栏呈现不同的状态，我们需要在跳转的时候传入对应的查询参数，然后在跳转到不同的页面时读取这个参数来呈现对应的不同的状态，具体的代码片段如下：
let {index}=qs.parse(window.location.search.substring(1)) export default { data(){ return { navConfig, curIndex:parseInt(index,10) || 0 } }, methods:{ changeNav(index,list){ location.href=`${list.href}?index=${index}` } } }
值得一提的是，在这里我们使用到了一个qs库，这个库可以方便我们提取出当前url后面的查询参数。
最后，由于在其他页面中，filters属性和底部导航栏组件都可以进行复用，所以这里我们利用mixins属性，来对filters属性和底部导航栏组件的注入进行打包，打包在一个js文件夹下的mixin.js文件中：
import Footnav from 'components/FootNav.vue' let mixin={ filters:{ currency(num){ num=num+'' let arr=num.split('.') if (arr.length===1){ return num+'.00' } else { if (arr[1].length===1){ return num+'0' } else return num } } }, components:{ Footnav } } export default mixin
当你的页面需要使用到该过滤器，或者底部导航栏时，只要对这个模块进行引入，并在mixins属性中添加它即可：
new Vue({ ... mixins:[mixin] })
二、目录分类页
目录分类页并无新的操作，和首页的部分操作类似，就是利用axios从接口中获取数据并渲染到页面中，并对页面中的一些焦点状态进行v-show的处理，以及一些类名和焦点的处理，我们可以从目录分类页中通过点击热销商品进入商品详情页，通过点击热门品牌进入商品搜索列表页，在进行这些页面的跳转时，把一些关键的数据传入查询参数中以便跳转页面获取即可。