vue实现商品详情页功能之商品选项卡

本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码，供大家参考，具体内容如下

用户点击商品进入商品详情页，默认显示第一个小图对应的大图，然后鼠标滑到小图上，大图也会发生改变，实现效果如下：

实现代码：

shopitem.vue的template（html）,上面是大图，下面是小图，鼠标滑动到小图上，触发geturl事件（参数是小图的show属性，索引）：

item.json文件（我的数据文件，默认第一个小图的show为true，默认大图显示第一张。大图和小图的路径一样的，只是css控制的图片大小不一样）：

shopitem.vue的<script>方法（fechdata（）是用vue-resource请求后台数据，即本地json文件。本地json文件存放在static文件夹里。）

vuex（状态管理）的store.js文件代码，实现数据持久化：

这就是实现该效果的全部代码，用到了es6函数，vuex，请求数据。反正我现在终于有点儿体会到了es6函数的好处了，希望也能帮到你们啊。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。