<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实现购物车案例</title>
</head>
<body>
<div id="app">
<div v-if="items.length">
<h1> {{msg}} computed{{ counts }}</h1>
编号: <input type="text" v-model="item.id">
名称: <input type="text" v-model="item.name">
单价: <input type="text" v-model="item.price">
数量: <input type="text" v-model="item.count">
<button @click="addCount"> 添加到购物车 </button>
<br><br><br>
<table border="1">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><input type="button" value="-" @click="remove(index)"> {{item.count}} <input type="button" value="+" @click="add(index)"> </td>
<td>{{item.count * item.price}}</td>
<td><button @click="removeClick(index)">删除</button></td>
</tr>
</table>
<h3>总价格: {{ totalPrice }}</h3>
<h3>总价格: {{ totalPrice }}</h3>
<h3>总价格: {{ totalPrice }}</h3>
</div>
<h1 v-else>购物车为空</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data : {
count:0,
msg:'购物车案例',
item : {},
items:[
{id:1,name:'iphone12',price:4899,count:1,delete:"删除"},
{id:2,name:'redmik30pro',price:3199,count:1,delete: "删除"},
]
},
methods: {
add:function (idx){
this.items[idx].count++
},
remove:function (idx){
if (this.items[idx].count>1) {
this.items[idx].count--
} else {
alert('购买的商品不能少于一件')
}
},
// totalPrice:function (){
// var totalprice = 0
// for (var i=0 ; i<this.items.length ; i++){
// totalprice +=this.items[i].price *this.items[i].count
// }
// return totalprice
// },
addCount:function (){
if (!this.item.id){
alert('请输入编号');
return false
}
if (!this.item.name){
alert('请输入名称');
return false
}
if (!this.item.price){
alert('请输入价格');
return false
}
if (!this.item.count){
alert('请输入数量');
return false
}
if (!(this.item.count>0)){
alert('请输入正确数量');
return false
}
this.items.push(this.item) //放入数组
},
removeClick(index){
this.items.splice(index,1)
}
},
computed : {
counts:function (){
return this.count+10
},
totalPrice:function (){
// var totalprice = 0
// // for (var i=0 ; i<this.items.length ; i++){
// // totalprice +=this.items[i].price *this.items[i].count
// // }
// for (let item of this.items) {
// totalprice +=item.price*item.count
// }
// return totalprice
return this.items.reduce(function (pre,item){
return pre + item.price*item.count
},0)
},
}
})
</script>
</body>
</html>
