产品编号 | 产品名字 | 购买数量 | 产品单价 | 产品总价 | 操作 |
---|---|---|---|---|---|
{{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 ;
}
更多资料免费分享加群 120342833 验证回答 ZZ
},
mounted:function(){
this.tween('97000','0');
},
ge
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();
}
}
});