欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-25 10:58:41
本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码,供大家参考,具体内容如下用户点击商品进入商品详情页,默认显示第一个小图对应的大图,然后鼠标滑到小图上,大图也会发生改变,实现效果如下...

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

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

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

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

实现代码:

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

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

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

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

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

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

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

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

vuex(状态管理)的store.js文件代码,实现数据持久化:

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

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

相关标签: vue 选项卡