vue實現(xiàn)商品詳情頁功能之商品選項卡
本文實例為大家分享了vue實現(xiàn)商品詳情頁功能之商品選項卡的具體代碼，供大家參考，具體內(nèi)容如下
用戶點(diǎn)擊商品進(jìn)入商品詳情頁，默認(rèn)顯示第一個小圖對應(yīng)的大圖，然后鼠標(biāo)滑到小圖上，大圖也會發(fā)生改變，實現(xiàn)效果如下：
實現(xiàn)代碼：
shopitem.vue的template（HTML）,上面是大圖，下面是小圖，鼠標(biāo)滑動到小圖上，觸發(fā)getUrl事件（參數(shù)是小圖的show屬性，索引）：
item.json文件（我的數(shù)據(jù)文件，默認(rèn)第一個小圖的show為true，默認(rèn)大圖顯示第一張。大圖和小圖的路徑一樣的，只是css控制的圖片大小不一樣）：
shopitem.vue的<script>方法（fechData（）是用vue-resource請求后臺數(shù)據(jù)，即本地json文件。本地json文件存放在static文件夾里。）
vuex（狀態(tài)管理）的store.js文件代碼，實現(xiàn)數(shù)據(jù)持久化：
//store 相當(dāng)于倉庫 一個組件使用并改變數(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)在終于有點(diǎn)兒體會到了es6函數(shù)的好處了，希望也能幫到你們啊。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3中使用CSS Modules實現(xiàn)樣式隔離
隨著構(gòu)建現(xiàn)代前端應(yīng)用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應(yīng)運(yùn)而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要給大家分享介紹了關(guān)于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細(xì)，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue3處理大數(shù)據(jù)量渲染和優(yōu)化的方法小結(jié)
在現(xiàn)代Web應(yīng)用中,隨著用戶數(shù)據(jù)和交互的復(fù)雜性增加,如何高效地處理大數(shù)據(jù)量渲染成為了前端開發(fā)的重要環(huán)節(jié),本文將以Vue 3為例,探討如何優(yōu)化大數(shù)據(jù)量渲染,提升應(yīng)用性能,需要的朋友可以參考下2024-07-07
Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
最近新項目中需要一個彈窗組件,所以我就做了一個,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3封裝一個符合思維且簡單實用的彈出層,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
關(guān)于nuxt?store中保存localstorage的問題
這篇文章主要介紹了關(guān)于nuxt?store中保存localstorage的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3使用富文本框(wangeditor)的方法總結(jié)
項目中用到了富文本,選來選去選擇了wangeditor,下面這篇文章主要給大家介紹了關(guān)于Vue3使用富文本框(wangeditor)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
有時候我們希望在指定的位置輸出我們的子元素,這時候具名插槽就排上了用場,這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下2022-10-10