Vue implements the product tab of the product details page function

This article example shares the specific code of the product tab of Vue to realize the product details page function for your reference. The specific content is as follows

When a user clicks on a product to enter the product details page, the large image corresponding to the first small image is displayed by default. Then, when the mouse moves over the small image, the large image will also change. The effect is as follows:

Implementation code:

The template (HTML) of shopitem.vue has a large image on the top and a small image on the bottom. When the mouse moves over the small image, the getUrl event is triggered (the parameter is the show attribute and index of the small image):

item.json file (my data file, by default, the show of the first small picture is true, and the default large picture shows the first one. The paths of the large and small pictures are the same, but the picture sizes controlled by CSS are different):

The <script> method of shopitem.vue (fechData() uses vue-resource to request background data, that is, local json files. Local json files are stored in the static folder.)

The store.js file code of vuex (state management) realizes data persistence:

//store is equivalent to a warehouse. One component uses and changes data, and another component uses the data changed by the previous component. //So this is how vuex realizes data sharing between different components (different pages). //Introduce vuex
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
//Use Vuex to implement data persistence/* 1.state is mainly used to store data in vuex*/
var state = {
 num:1,
 info:[]
}
 
// 2. mutation contains methods, which are mainly used to change the data in state var mutations={
 Count(){
  ++state.num;
 },
 // value must be written state
 storeItemInfo(state,data){
  state.info=data;
// state.list.push(data);
 }
}
 
 // 3. Similar to calculated properties, when the count data in state is changed, the method in getters will be sent to obtain the new value var getters={
  computedCount: (state) => {
    return state.count*2;
  }
}
 
// 3.vuex instantiates Vuex.Store
const store = new Vuex.Store({
  state, /* abbreviation */
  mutations,
  getters
})
 
//4. Expose store
export default store;

This is all the code to achieve this effect, using es6 functions, vuex, and request data. Anyway, I have finally realized the benefits of es6 functions, and I hope it can help you.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.