<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue实现购物车</title>
<script src="../js/vue221.js"></script>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(itemm,index) in arr" :key="index">
<span>名称：{{item.name}}</span>
<span>数量：<button @click="reduce(index)" v-if="item.num>0">-</button>{{item.num}}<button>+</button></span>
<span>单价：{{item.price}}</span>
<span>总价：{{item.sum}}</span>
<button @click="remove(index)">删除</button>
</li>
<li>
一共买了{{sum}}件商品
//当总价达到500以上时颜色 发生改变
总价:<span :cllass="[{active:total>500}]">{{total}}元
</span>
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
arr:[{name:"鞋子",num:4,price:20,sum:80},{name:"衣服",num:1,price:50,sum:50},{name:"裤子",num:1,price:150,sum:150}]
},
methods:{
reduce:function(){
//点击按钮实现减并且让对应的 小计发生变化
this.arr[index].num>0?this.arr[index].num--:this.arr[index].num==0;
this.arr[index].sum=this.arr[index].num*this.arr[index].price
}，
//点击按钮实现加 并且对应的小计也要发生变化
add:function(){
this.arr[index].num++;
this.arr[index].sum=this.arr[index].num*this.arr[index].price
}
//删除对应的商品
remove:function(index){
this.arr.splice(1,index)
}
},
//计算当前商品的总件数(因为需要知道的数据，，没有在data中，所以需要用到计算属性
computed:{
sums:function(){
let sum=0;
this.arr.forEach(item=>{
sum+=item.ssum
})
return sum
}.
total:function(){
let sum=o;
this.arr.forEach(item=>{
sum+=item.sum
})
return sum
}
}
})
</script>
</body>
</html>
