本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码,供大家参考,具体内容如下
用户点击商品进入商品详情页,默认显示第一个小图对应的大图,然后鼠标滑到小图上,大图也会发生改变,实现效果如下:
实现代码:
shopitem.vue的template(HTML),上面是大图,下面是小图,鼠标滑动到小图上,触发getUrl事件(参数是小图的show属性,索引):
item.json文件(我的数据文件,默认第一个小图的show为true,默认大图显示第一张。大图和小图的路径一样的,只是css控制的图片大小不一样):
shopitem.vue的<script>方法(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函数的好处了,希望也能帮到你们啊。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- 解决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实现商品详情页功能之商品选项卡
转载请保留出处和原文链接:https://www.cnhackhy.com/59714.htm