vue购物车金额结算

Html

Css



    vue测试监听购物车数量及金额的变化
    名称搜索
    
        
            
                图片
                商品名称
                商品数量
                商品单价
                商品金额
                操作
            
        
        
            
                
                {{item.name}}
                
                     {{item.count}}
                    
                
                {{item.price | numFilter(1)}}
                {{item.count*item.price | numFilter(2)}}
                
            
            
                {{totalCount}}件商品总计（不含运费）{{totalPrice | numFilter(2)}}

图片	商品名称	商品数量	商品单价	商品金额	操作
	{{item.name}}	{{item.count}}	{{item.price \| numFilter(1)}}	{{item.count*item.price \| numFilter(2)}}
{{totalCount}}件商品总计（不含运费）{{totalPrice \| numFilter(2)}}

 h1 {
	text-align:center;
	background:cornflowerblue;
	color:#fff;
}
.s span {
	padding:11px 20px;
	background:cornflowerblue;
	color:#fff;
}
.s input {
	vertical-align:middle;
	padding:10px 20px;
}
table {
	width:85%;
	margin:0 auto;
	border:solid 1px #ccc;
	border-collapse:collapse;
	text-align:center;
}
table td {
	border:solid 1px #ccc;
}
img {
	width:40px;
}

window.onload = function() {
    var vm = new Vue({
        el: '#app',
        data: {
            items: [{
                    id: 1,
                    name: "苹果",
                    price: 10,
                    count: 1,
                    url: "http://www.jq22.com/img/cs/500x500-1.png"
                },
                {
                    id: 2,
                    name: "蝴蝶",
                    price: 8,
                    count: 5,
                    url: "http://www.jq22.com/img/cs/500x500-2.png"
                },
                {
                    id: 3,
                    name: "小狗",
                    price: 100,
                    count: 1,
                    url: "http://www.jq22.com/img/cs/500x500-3.png"
                },
                {
                    id: 4,
                    name: "鲜花",
                    price: 10,
                    count: 1,
                    url: "http://www.jq22.com/img/cs/500x500-4.png"  
                }
            ],
            search: ""
        },
        methods: {

},
        filters: { //过滤器
            numFilter: function(data, n) { //data==item.price 当前过滤的数据 n==2
                return "￥" + data.toFixed(n)
            }
        },
        computed: { //计算属性
            totalCount: function() {
                var n = 0;
                this.items.forEach((v, i) => {
                    n += v.count
                });
                return n;
            },
            totalPrice: function() {
                var money = 0;
                this.items.forEach((v, i) => {
                    money += v.count * v.price
                });
                return money;
            },
            searchFor: function() {
                if (!this.search) {
                    return this.items
                }
                return this.items.filter((v, i) => {
                    if (v.name.indexOf(this.search) !== -1) { //匹配成功
                        return v
                    }
                })
            }

}
    })
}

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

立即下载

vue购物车金额结算



代码描述：vue购物车金额结算

更新时间：2019-11-08 01:40:24
1.数量变化，商品金额变化
2.数量最少只能是1，再点击会禁止
3.输入查询的商品名称，下面会显示查询的内容

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

jiyahua

相关代码

vue测试监听购物车数量及金额的变化

vue购物车金额结算

最新