使用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);

}

}

类似计算属性，改变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函数的好处了，希望也能帮到你们啊。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!