VUE JS小实例——购物车的实现

index.html代码:



	
		
		购物车示例
		
	
	
		
购物车为空

index.js源码

var app = new Vue({
	el:'#app',
	data:{
		list:[
			{
				id:1,
				name:'iPhone7',
				price:6188,
				count:1
			},
			{
				id:2,
				name:'iPad pro',
				price:5888,
				count:1
			},
			{
				id:3,
				name:'MacBook Pro',
				price:21488,
				count:1
			}
		]
	},
	computed:{
		totalPrice: function() {
			var total = 0;
			for(var i = 0; i < this.list.length; i++) {
				var item = this.list[i];
				total += item.price * item.count;
			}
			return total.toString().replace(/\B(?=(\d{3}) + $)/g, ',');
		}
	},
	methods:{
		handleReduce: function(index) {
			if(this.list[index].count === 1) {
				return;
			}
			this.list[index].count--;
		},
		handleAdd: function(index) {
			this.list[index].count++;
		},
		handleRemove: function(index) {
			this.list.splice(index,1);
		}
	}
})

style.css

[v-cloak] {
	display: none;
}
table {
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}
th, td {
	padding: 8px 16px;
	border: 1px solid #e9e9e9;
	text-align: left;
} 
th {
	background: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
	white-space: nowrap;
}

效果:
VUE JS小实例——购物车的实现_第1张图片

你可能感兴趣的:(前端)