这是一个购物车的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width: 70%;
margin: 0 auto;
border-collapse: collapse;
text-align: center;
}
th{
padding: 10px 0;
}
td{
padding: 15px 0;
}
</style>
</head>
<body>
<div id="itany">
<table border="1">
<thead>
<tr>
<th v-for="value in arr">{{value}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in ars">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.price}}</td>
<td><button v-on:click="alt(index)">+</button> {{val.num}} <button v-on:click="reg(index)">-</button></td>
<td>{{val.all}}</td>
<tr>
<td colspan="5">总价 :{{meg}}元</td>
</tr>
</tr>
</tbody>
</table>
</div>
<script src="./9.12/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:["编号","名称","单价","数量","总价"],
ars:[
{name:"香蕉",price:1,num:1,all:1},
{name:"苹果",price:2,num:1,all:2},
{name:"鸭梨",price:3,num:1,all:3}
],
meg:6
},
methods:{
alt:function(i){
if(this.ars[i].num>=0){
this.ars[i].num+=1;
this.ars[i].all=this.ars[i].price*this.ars[i].num;
this.meg=this.ars[0].all+this.ars[1].all+this.ars[2].all;
}
},
reg:function(i){
if(this.ars[i].num>0){
this.ars[i].num-=1;
this.ars[i].all=this.ars[i].price*this.ars[i].num;
this.meg=this.ars[0].all+this.ars[1].all+this.ars[2].all;
}
}
}
})
</script>
</body>
</html>
网友评论