有了v-for循环,渲染商品列表简直不要太方便了,以前写一个商品列表页要一天,现在只需要几分钟,除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据,它可使前端工程师独立于后端进行开发,在前端可以先行自己测试,之后再与后端对接联调,可以节省不少的时间。
所谓孰能生巧,vue构建项目联系的多了以后也可随意的封装组件,抽离组件。用起来得心应手。
实现效果动图如下:
商品列表页的实现步骤如下:
1.新建商品列表组件
新建商品列表组件goodsList.vue文件,在首页点击查看商品时,跳转到商品列表。这里使用router-link,绑定跳转后的路径为商品列表页的路径/goods。如下:
index.vue文件:
2.商品列表组件的实现
-
导入头部和尾部组件
商品列表页与首页共用header部分和footer部分,因为header部分和footer部分我是单独的组件,所以这里只需要引入header部分和footer部分的组件即可。如下:
声明组件
使用组件
-
中间部分商品列表的实现
商品列表部分布局由nav导航部分和一些商品图标和商品信息简单构成,还可以根据需要实现更为复杂的需求。2.1 没有采用mock数据模拟,所以直接定义了一个数据列表,通过v-for循环从列表中读取数据,进而渲染到页面。定义的数据列表如下:
return { count: 0, goodsList: [ { src: require('../assets/goods/mi6.jpg'), productName: '小米6', productId: 10001, prodcutPrice: 1998, }, { src: require('../assets/goods/miS2.jpg'), productName: '红米S2', productId: