<div id="app">
<div class="product" v-for='(item,index) in list'>
<button class="up" @click='upFn(index)'>+</button>
<input type="text" class="inp" v-model='item.num'>
<button class="down" @click='downFn(index)'>-</button>
<div class="content"> {{item.name}}单价： {{item.price}}元小计{{all[index]}}元</div>
</div>
<div class="info">
商品共合计<button class="btn">{{number}}</button>件 共花费了 <button class="btn">{{top}}</button>元
</div>
<div class="info"> 其中最贵的商品是<button class="btn long">{{expens2}}</button>单价是<button class="btn">{{expens1}}</button>元
</div>
<div class="info">
总价最高的是<button class="btn">{{bigP}}</button>
</div>
</div>
let list=[
{
id:1,
name:'连衣裙',
num:0,
price:100,
},
{
id:2,
name:'裙子',
num:0,
price:600,
},
{
id:1,
name:'外套',
num:0,
price:300,
},
{
id:1,
name:'裤子',
num:0,
price:500,
}
]
let vm=new Vue({
el:'#app',
data:{
list,
top:0,
number:0,
expens1:0, //最贵的商品价格
expens2:'', //最贵的商品名称
bigP:0
},
methods:{
upFn(index){
this.list[index].num++;
},
downFn(index){
if(this.list[index].num>0){
this.list[index].num--;
}
}
},
watch:{
list:{
handler(value){
this.top=0; //总价
value.map(item =>{
this.top+=item.num*item.price;
})
this.number=0; //总数量
value.map(item =>{
this.number+=Number(item.num);
})
value.map(item =>{
if(item.price>this.expens1){
//最贵的商品价格
this .expens1=item.price;
//最贵的商品名称
this.expens2=item.name;
}
});
this.all.map(item =>{ //单品价格最高
if(item > this.bigP){
this.bigP=item;
}
})
},
deep:true,
immediate:true
}
},
computed:{
all:{
get(){
let arr=[];
this.list.map(item =>{
arr.push(item.num*item.price)
})
return arr;
}
}
},
})