vue實現(xiàn)商品詳情頁功能之商品選項卡
更新時間：2021年04月21日 11:46:07 作者：大灰狼吃小白兔
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品詳情頁功能之商品選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)商品詳情頁功能之商品選項卡的具體代碼，供大家參考，具體內容如下
用戶點擊商品進入商品詳情頁，默認顯示第一個小圖對應的大圖，然后鼠標滑到小圖上，大圖也會發(fā)生改變，實現(xiàn)效果如下：
實現(xiàn)代碼：
shopitem.vue的template（HTML）,上面是大圖，下面是小圖，鼠標滑動到小圖上，觸發(fā)getUrl事件（參數(shù)是小圖的show屬性，索引）：
item.json文件（我的數(shù)據(jù)文件，默認第一個小圖的show為true，默認大圖顯示第一張。大圖和小圖的路徑一樣的，只是css控制的圖片大小不一樣）：
shopitem.vue的<script>方法（fechData（）是用vue-resource請求后臺數(shù)據(jù)，即本地json文件。本地json文件存放在static文件夾里。）
vuex（狀態(tài)管理）的store.js文件代碼，實現(xiàn)數(shù)據(jù)持久化：
//store 相當于倉庫 一個組件使用并改變數(shù)據(jù)，另一個組件使用的是前一個組件改變后的數(shù)據(jù)
//所以這就是vuex 實現(xiàn)了不同組件（不同頁面）的數(shù)據(jù)共享
//引入vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 用Vuex實現(xiàn)數(shù)據(jù)的持久化
/* 1.state 在vuex中主要用于存儲數(shù)據(jù) */
var state={
num:1,
info:[]
}
// 2.mutation里面放的是方法，方法主要用于改變state里面的數(shù)據(jù)
var mutations={
Count(){
++state.num;
},
//傳值必須寫state
storeItemInfo(state,data){
state.info=data;
// state.list.push(data);
}
}
// 3.類似計算屬性，改變state里面的count數(shù)據(jù)的時候，會差發(fā)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;
這就是實現(xiàn)該效果的全部代碼，用到了es6函數(shù)，vuex，請求數(shù)據(jù)。反正我現(xiàn)在終于有點兒體會到了es6函數(shù)的好處了，希望也能幫到你們啊。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在Vue3中使用CSS Modules實現(xiàn)樣式隔離
隨著構建現(xiàn)代前端應用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應運而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要給大家分享介紹了關于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
Vue3處理大數(shù)據(jù)量渲染和優(yōu)化的方法小結
在現(xiàn)代Web應用中,隨著用戶數(shù)據(jù)和交互的復雜性增加,如何高效地處理大數(shù)據(jù)量渲染成為了前端開發(fā)的重要環(huán)節(jié),本文將以Vue 3為例,探討如何優(yōu)化大數(shù)據(jù)量渲染,提升應用性能,需要的朋友可以參考下2024-07-07
Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧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