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

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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函数的好处了,希望也能帮到你们啊。

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue实现商品详情页功能之商品选项卡全部内容,希望文章能够帮你解决vue实现商品详情页功能之商品选项卡所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:vue选项卡"