vue购物车代码-html代码-BFW代码库

vue购物车代码

代码语言：html

所属分类：电商

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=vue&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            var app = new Vue({
                el: "#app",
                data() {
                    return {
                        num: null,
                        list: [{
                            id: 0, imgUrl: 'http://repo.bfw.wiki/bfwrepo/image/5e0e942fe0cbf.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90', price: 2, num: 1, pd: false, isActive: false
                        },
                            {
                                id: 1, imgUrl: 'http://repo.bfw.wiki/bfwrepo/image/5e0e942fe0cbf.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90', price: 4, num: 1, pd: false, isActive: false
                            },
                            {
                                id: 2, imgUrl: 'http://repo.bfw.wiki/bfwrepo/image/5e0e942fe0cbf.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90', price: 5, num: 1, pd: false, isActive: false
                            },
                            {
                                id: 3, imgUrl: 'http://repo.bfw.wiki/bfwrepo/image/5e0e942fe0cbf.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90', price: 3, num: 1, pd: false, isActive: false
                            },
                            {
                                id: 4, imgUrl: 'http://repo.bfw.wiki/bfwrepo/image/5e0e942fe0cbf.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90', price: 6, num: 1, pd: false, isActive: false
                            }],
                        totalInt: false,
                        newList: []
                    }
                },
                filters: {
                    priceNum: function(val) {
                        return val.toFixed(2)
                    }
                },
                computed: {
                    totalNum: function() {
                        var total = 0;
                        for (var i in this.newList) {
                            if (this.newList[i].pd) {
                                total += this.newList[i].price*this.newList[i].num
                            } else {
                                total = 0
                            }
                        }
                        return total.toFixed(2)
                    },
                    goodsNum: function() {
                        var goods = 0;
                        for (var i in this.newList) {
                            if (this.newList[i].pd) {
                                goods += this.newList[i].num;
                            }
                        }
                        return goods
                    }
                },
                methods: {
                    deleteClick(index) {
                        if (this.list[index].pd) {
                            this.list.splice(index, 1);
                            this.newList.splice(index, 1)
                        } else {
                            alert('请先选择删除的选项')
                        }
                    },
                    totalClick() {
                        this.totalInt=!this.totalInt
                        if (this.totalInt) {
                            for (var i in this.list) {
                                this.list[i].pd = true;
                                this.list[i].isActive = true
                                if (this.list[i].pd) {
                                    this.newList.push(this.list[i]);
                                }
                            }
                        } else {
                            for (var i in this.list) {
                                this.list[i].pd = false;
                                this.newList = [];
                                this.list[i].isActive = false
                            }
                        }
                    },
                    itemClick(index) {
                        this.list[index].pd=!this.list[index].pd
            .........完整代码请登录后点击上方下载按钮下载查看