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文件代码,实现数据持久化:
//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函数的好处了,希望也能帮到你们啊。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)