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函數的好處瞭,希望也能幫到你們啊。

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀:

    None Found