vue實現(xiàn)商品詳情頁功能之商品選項卡

更新時間：2021年04月21日 11:46:07 作者：大灰狼吃小白兔

這篇文章主要為大家詳細介紹了vue實現(xiàn)商品詳情頁功能之商品選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)商品詳情頁功能之商品選項卡的具體代碼，供大家參考，具體內(nèi)容如下

用戶點擊商品進入商品詳情頁，默認顯示第一個小圖對應的大圖，然后鼠標滑到小圖上，大圖也會發(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ù)的好處了，希望也能幫到你們啊。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中的計算屬性與監(jiān)聽屬性
這篇文章介紹了Vue中的計算屬性與監(jiān)聽屬性，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
Vue router配置與使用分析講解
第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細節(jié)
2022-12-12
vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)
這篇文章主要介紹了vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
在vue自定義組件中使用?v-model指令詳情
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
Vue監(jiān)聽數(shù)據(jù)渲染DOM完以后執(zhí)行某個函數(shù)詳解
今天小編就為大家分享一篇Vue監(jiān)聽數(shù)據(jù)渲染DOM完以后執(zhí)行某個函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue3中el-table實現(xiàn)表格合計行的示例代碼
這篇文章主要介紹了vue3中el-table實現(xiàn)表格合計行,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
Vue2.0父子組件傳遞函數(shù)的教程詳解
這篇文章主要介紹了Vue2.0父子組件傳遞函數(shù)的教程詳解,需要的朋友可以參考下
2017-10-10
Vue配置文件中的proxy配置方式詳解
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關于Vue配置文件中的proxy配置方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
Vite代理如何解決跨域問題詳解
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript實施的安全限制,下面這篇文章主要給大家介紹了關于Vite代理如何解決跨域問題的相關資料,需要的朋友可以參考下
2023-03-03
如何以拖拽方式生成Vue用戶界面
這篇文章主要給大家介紹了關于如何以拖拽方式生成Vue用戶界面的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04