产品编号产品名字购买数量产品单价产品总价操作
{{item.id}}{{item.name}}-+{{item.price | filtermoney}}{{item.price*item.quantity | filtermoney}}移除
总购买价{{animatenum | filtermoney}}总购买数量清空购物车
您的购物车为空
var vm = new Vue({
el: "#app",
data: {
totalPrice: 0,
animatenum: 0,
message: [{
id: 007,
name: 'iphone5s',
quantity: 3,
price: 4000
}, {
id: 1340,
name: 'iphone5',
quantity: 9,
price: 3000
}, {
id: 7758,
name: 'imac',
quantity: 4,
price: 7000
}, {
id: 2017,
name: 'ipad',
quantity: 5,
price: 6000
}]
},
watch: {
toComput2: function(newValue, oldValue) {
this.tween(newValue, oldValue);
}
},
computed: {
//计算总金额
toComput2: function() {
var vm = this;
//每次进来要重置总金额
vm.totalPrice = 0;
this.message.forEach(function(mess) {
vm.totalPrice += parseInt(mess.price * mess.quantity);
})
return this.totalPrice;
}
},
filters: {
filtermoney: function(value) {
return '￥' + value;
}
},
mounted: function() {
this.tween('97000', '0');
},
methods: {
//计算总数的方法为什么写在methods里面就不行？
toComput: function() {
var vm = this;
vm.message.forEach(function(mess) {
vm.totalPrice += parseInt(mess.price * mess.quantity);
})
return vm.totalPrice;
},
add: function(index) {
var vm = this;
vm.message[index].quantity++;
},
subtract: function(index) {
var vm = this;
vm.message[index].quantity--;
if(vm.message[index].quantity <= 0) {
if(confirm("你确定移除该商品？")) {
vm.message.splice(index, 1)
}
}
},
remove: function(index) {
var vm = this;
if(confirm("你确定移除该商品？")) {
vm.message.splice(index, 1)
}
},
empty: function() {
var vm = this;
vm.message.splice(0, vm.message.length);
},
jia: function(index) {
var vm = this;
vm.arr[index].one++;
},
tween: function(newValue, oldValue) {
var vm = this;
var twen = new TWEEN.Tween({
animatenum: oldValue
});
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
};
twen.to({
animatenum: newValue
}, 750);
twen.onUpdate(function() {
//toFixed();保留几位小数
vm.animatenum = this.animatenum.toFixed();
})
twen.start();
animate();
}
}
});
网友评论