VUE购物车

Html

Css



    
        
        购物车
    
    
        商品信息
        商品金额
        商品数量
        总金额
        编辑
    
    
        
            
                
                    
                        √
                    
                    
                        ×
                    
                
                 
                
                    {{i.name}}
                    
                        赠送:
                        {{i.gift[0]}} 
 {{i.gift[1]}} 
                    
                
            
            ￥{{i.single}}
            
                
            
            ￥{{(i.single * i.num).toFixed(1)}}
            
                删除
            
        
    
    
        
            
                √
                ×
            
            全选
            删除
        
        
            Item total:
                {{accountNum.toFixed(1)}}
            
            结账

* {
	margin:0;
	padding:0;
	list-style:none;
}
#app {
	width:1200px;
	height:600px;
	margin:auto;
}
.cart {
	margin-top:100px;
}
h1 {
	position:relative;
	margin:-20px auto;
	background:white;
	width:200px;
	letter-spacing:8px;
	text-align:center;
}
.title {
	margin-top:40px;
	height:53px;
	line-height:53px;
	background:#5d5d5d;
	color:white;
	display:flex;
	font-size:18px;
	font-weight:bolder;
}
.information {
	flex:5;
	text-align:center;
}
.single,.num,.total,.edit {
	flex:1;
	justify-content:center;
	align-items:center;
	display:flex;
}
.commodity {
	height:140px;
	padding-bottom:40px;
	display:flex;
}
.commodity ul {
	display:flex;
	width:100%;
	border-bottom:1px solid #aaaaaa;
	border-top:1px solid #aaaaaa;
}
.comInformation {
	flex:5;
}
.comSingle,.comNum,.comTotal,.comEdit {
	flex:1;
	justify-content:center;
	align-items:center;
	display:flex;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance:none !important;
	margin:0;
}
.comNum input {
	width:37px;
	height:25px;
	text-align:center;
	margin-left:3px;
	margin-right:3px;
}
.add,.cut {
	font-weight:bolder;
}
.:hover {
	color:red;
	cursor:pointer;
}
.gou {
	background:#f07b19;
}
.cha {
	background:red;
}
.gou,.cha {
	width:14px;
	height:14px;
	border-radius:7px;
	font-size:7px;
	color:white;
	border:solid 1px #bcbcbc;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
	position:absolute;
}
.comInformation {
	display:flex;
}
.photo {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-right:20px;
}
.photo img {
	width:72px;
	height:72px;
}
.choose {
	width:15px;
	display:flex;
	height:100%;
	justify-content:center;
	align-items:center;
	margin-left:22px;
	margin-right:22px;
}
.name {
	display:flex;
	flex-direction:column;
	flex:1;
	font-size:14px;
}
.nametop {
	flex:1;
	display:flex;
	align-items:center;
}
.namebottom {
	flex:0.5;
	display:flex;
}
.giftname {
	margin-left:34px;
}
.footer {
	display:flex;
	justify-content:space-between;
	height:60px;
	line-height:60px;
}
.footer-left,.footer-right {
	display:flex;
}
.footer-gou,.footer-cha {
	width:14px;
	height:14px;
	border-radius:7px;
	font-size:7px;
	color:white;
	border:solid 1px #bcbcbc;
	margin-left:22px;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
}
.footer-gou {
	background:#f07b19;
}
.footer-cha {
	background:red;
}
.allchoose {
	margin-left:24px;
	font-size:14px;
	color:#f07b19;
	line-height:60px;
	cursor:pointer;
}
.all {
	font-size:14px;
	line-height:60px;
	margin-left:14px;
	cursor:pointer;
}
.settlement {
	width:205px;
	height:51px;
	margin-left:30px;
	display:flex;
	justify-content:center;
	background:linear-gradient(to top,#fb3023,#f21305);
	color:white;
	font-size:14px;
	font-weight:bolder;
}
.manner {
	line-height:60px;
	height:60px;
	display:flex;
	align-items:center;
}
.money {
	color:red;
}
.itemtotal {
	display:flex;
}
button {
	width:15px;
	height:15px;
}
.fade-enter-active,.fade-leave-active {
	transition:opacity .5s;
}
.fade-enter,.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity:0;
}

var app = new Vue({
    el: '#table',
    data: {
        List: [{
            name: '黄鹤楼香烟',
            images: "http://www.jq22.com/img/cs/500x500-1.png",
            gift: ['打火机', 'XXX'],
            single: 19.2,
            num: 1,
            show: true
        }, {
            name: '可乐',
            gift: ['吸管', 'XXX'],
            images: "http://www.jq22.com/img/cs/500x500-2.png",
            single: 6.1,
            num: 2,
            show: false
        }],
        allShow: false,
        accountNum: 0,
        listIndex: 0
    },
    mounted() {
        this.account()
    },
    computed: {

},
    watch: {
        List: {
            handler: function(oldVal) {
                var oldVal = oldVal[this.listIndex].num
                const regex = /^([0-9]*[1-9][0-9]*(.[0-9]+)?|[0]+.[0-9]*[1-9][0-9]*)$/
                if (!regex.test(oldVal)) { //如果小于等于零
                    this.List[this.listIndex].num = 1 //等于一
                    console.log(this.List[this.listIndex].num)
                }
                this.account()
            },
            deep: true
        }
    },
    methods: {
        saveIndex: function(index) {
            this.listIndex = index
        },
        account: function() {
            this.accountNum = 0
            var that = this
            this.List.forEach(function(item, index) {
                if (item.show == true) {
                    that.accountNum += item.single * item.num
                }
            })
        },
        List: function(i) {
            this.List.splice(i, 1);
            this.account()
        },
        add: function(i) {
            this.listIndex = i
            this.List[i].num++;
            this.account()
        },
        cut: function(i) {
            this.listIndex = i
            this.List[i].num--;
            this.account()
        },
        allChoose: function() {
            this.allShow = !this.allShow
            for (var i in this.List) {
                this.List[i].show = this.allShow
            }
            this.account()
        },
        choose: function(i) {
            this.List[i].show = !this.List[i].show
            console.log(this.List.length)
            var choose = this.List.filter(function(i) {
                return i.show == true;
            });
            choose.length == this.List.length ? this.allShow = true : this.allShow = false
            this.account()
        },
        all: function() {
            for (var i = this.List.length - 1; i >= 0; i--) {
                console.log(i);
                if (this.List[i].show == true) {
                    this.List.splice(i, 1);
                }
            }
            this.account()
        }
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

VUE购物车



代码描述：基于VUE的购物车

基于vue的购物车

2

最新

发表评论全部评论

暂时没有评论！

config0

2018/11/2 11:30:33

js中改为
list：function（i）<div>
html中改为
<div class="" @click="list(index)">
删除
</div> </div> <div> <div> <div> <div> <b><div > </div></b></div> </div> </div> </div>
回复

config0

2018/11/2 11:26:59

删除的class名字给格式化删了请自行添加>.<
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

config

相关代码

购物车

VUE购物车

最新