vue实现商品详情页功能之商品选项卡
更新时间：2021年04月21日 11:46:07 作者：大灰狼吃小白兔
这篇文章主要为大家详细介绍了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函数的好处了，希望也能帮到你们啊。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
随着构建现代前端应用的需要,样式的管理和隔离变得越来越重要,为了解决样式冲突和管理困难的问题,CSS Modules 应运而生,本文我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vuex中mutations的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要给大家分享介绍了关于动态Axios的配置步骤，文中通过示例代码介绍的非常详细，通过这个教程大家可以很方便的实现动态Axios的配置，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
在现代Web应用中,随着用户数据和交互的复杂性增加,如何高效地处理大数据量渲染成为了前端开发的重要环节,本文将以Vue 3为例,探讨如何优化大数据量渲染,提升应用性能,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue注册模块与登录状态的持久化实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家详细介绍了Ant Design封装年份选择组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
关于nuxt store中保存localstorage的问题
这篇文章主要介绍了关于nuxt store中保存localstorage的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
项目中用到了富文本,选来选去选择了wangeditor,下面这篇文章主要给大家介绍了关于Vue3使用富文本框(wangeditor)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场,这篇文章主要给大家介绍了关于Vue中插槽Slot基本使用与具名插槽的相关资料,需要的朋友可以参考下2022-10-10
最新评论