<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js文件/vue.min.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 100%;
}
#app{
border: 1px solid black;
}
th{
height: 50px;
}
td{
border-bottom: 1px solid gray;
}
</style>
<body>
<div id="app">
<table>
<tr>
<th>序号</th>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
<th>归零操作</th>
</tr>
<tr v-for="iphone in iphones">
<td>{{iphone.id}}</td>
<td>{{iphone.name}}</td>
<td>{{iphone.price}}</td>
<td>
<button v-bind:disabled="iphone.count==0" @click="iphone.count-=1">-</button>
{{iphone.count}}
<button @click="iphone.count+=1">+</button>
</td>
<td>
<button @click="iphone.count=0">归零</button>
</td>
</tr>
</table>
总价:${{zongjia}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
iphones:[
{
id:1,
name:'iphone 8',
price:4000,
count:1
},
{
id:2,
name:'iphone x',
price:5000,
count:1
},
{
id:3,
name:'iphone 11',
price:6000,
count:1
}
]
},
computed:{
zongjia(){
if(this.iphones.length>0){
return this.iphones.reduce((prev,next)=>{
return prev+next.price*next.count
},0)
}else{
return 0;
}
}
}
})
</script>
</body>
</html>
vue 简易购物车
最新推荐文章于 2023-07-08 13:27:44 发布