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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

大灰狼吃小白兔   2021-04-21 我要评论
想了解vue实现商品详情页功能之商品选项卡的相关内容吗,大灰狼吃小白兔在本文为您仔细讲解vue商品选项卡的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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函数的好处了,希望也能帮到你们啊。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们