美文网首页Vue.js
vue购物车常用代码

vue购物车常用代码

作者: BSKSdorica | 来源:发表于2020-12-04 13:52 被阅读0次

    1.计算总价(必备)

    computed: {

    total() {

    return this.cartData.reduce((sum, x) => {  //cartData--商品或购物车列表

    if (x.selected) {     //selected是否选择,计算列表中选择的商品

    sum += x.price * x.count;    //sum商品总价

    }

    return sum;

    }, 0);

    }

    }

    2.购物车存储

    data(){

    return{

    cartData:JSON.parse(localStorage.getItem("cart")) || []  //从localStorage获取数据

    }

    }

    watch:{

    cartData:{

    handler(n){

    localStorage.setItem("cart", JSON.stringify(n));  //将数据存在localStorage中

    },

    deep:true   //深度监听

    }

    }

    相关文章

      网友评论

        本文标题:vue购物车常用代码

        本文链接:https://www.haomeiwen.com/subject/qetiwktx.html