这篇文章主要为大家详细介绍了vue实现商品详情本文来源gaodai$ma#com搞$$代**码)网8页功能之商品选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码，供大家参考，具体内容如下
用户点击商品进入商品详情页，默认显示第一个小图对应的大图，然后鼠标滑到小图上，大图也会发生改变，实现效果如下：
实现代码：
shopitem.vue的template（HTML）,上面是大图，下面是小图，鼠标滑动到小图上，触发getUrl事件（参数是小图的show属性，索引）：
item.json文件（我的数据文件，默认第一个小图的show为true，默认大图显示第一张。大图和小图的路径一样的，只是css控制的图片大小不一样）：
shopitem.vue的方法（fechData（）是用vue-resource请求后台数据，即本地json文件。本地json文件存放在static文件夹里。）
vuex（状态管理）的store.js文件代码，实现数据持久化：
//store 相当于仓库 一个组件使用并改变数据，另一个组件使用的是前一个组件改变后的数据 //所以这就是vuex 实现了不同组件（不同页面）的数据共享 //引入vuex import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 用Vuex实现数据的持久化 /* 1.state 在vuex中主要用于存储数据 */ var state={ num:1, info:[] } // 2.mutation里面放的是方法，方法主要用于改变state里面的数据 var mutations={ Count(){ ++state.num; }, //传值必须写state storeItemInfo(state,data){ state.info=data; // state.list.push(data); } } // 3.类似计算属性，改变state里面的count数据的时候，会差发getters里面的方法，获取新的值 var getters={ computedCount: (state) => { return state.count*2; } } // 3.vuex 实例化Vuex.Store const store = new Vuex.Store({ state, /* 简写 */ mutations, getters }) //4.暴露store export default store;
这就是实现该效果的全部代码，用到了es6函数，vuex，请求数据。反正我现在终于有点儿体会到了es6函数的好处了，希望也能帮到你们啊。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
您可能感兴趣的文章:
- 解决vue项目本地启动时无法携带cookie的问题
- vue项目启动出现cannot GET /服务错误的解决方法
- Vue修改项目启动端口号方法
- 详解webpack打包vue项目之后生成的dist文件该怎么启动运行
- 详解VSCode配置启动Vue项目
- webpack+vue+express(hot)热启动调试简单配置方法
- vue-cli启动本地服务局域网不能访问的原因分析
- 详解vue express启动数据服务
- vue实现秒杀倒计时组件
- Vue2.0/3.0双向数据绑定的实现原理详解
- 如何启动一个Vue.js项目
以上就是vue实现商品详情页功能之商品选项卡的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现商品详情页功能之商品选项卡
转载请注明原文链接：vue实现商品详情页功能之商品选项卡
