Vue.js 组件传值购物车
2018-09-20 本文已影响0人
纪美
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content='width=device-width initial-scale=1.0, user- scalable=no'>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<title>shopping</title>
</head>
<body>
<div class="container">
<new></new>
</div>
<script src="vue.js"></script>
<script>
// 父组件
Vue.component("new",{
template:`
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">编号</th>
<th class="text-center">名称</th>
<th class="text-center">单价</th>
<th class="text-center">数量</th>
<th class="text-center">总价</th>
</tr>
</thead>
<child1 v-bind:list="arr"></child1>
</table>
`,
data:function(){
return{
arr:[
{one:"苹果",two:3,three:1,four:3},
{one:"菠萝",two:2,three:1,four:2},
{one:"芒果",two:5,three:1,four:5}
]
}
}
})
// 子组件
Vue.component('child1',{
props:['list'],
template:`
<tbody class="text-center">
<tr v-for="(value,index) in list">
<td>{{index+1}}</td>
<td>{{value.one}}</td>
<td>{{value.two}}</td>
<td>
<button @click="btn1(index)">+</button>
<span>{{value.three}}</span>
<button @click="add(index)">-</button>
</td>
<td>{{value.four}}</td>
</tr>
<tr>
<td colspan="5" class="text-center">总计：{{arrs}}.00</td>
</tr>
</tbody>
` ,
data:function(){
return{
arrs:10
}
},
methods:{
btn1:function(ind){
// 数量
this.list[ind].three++;
// 小计：
this.list[ind].four=this.list[ind].two*this.list[ind].three;
// 总价
this.zongjia();
},
add:function(ind){
// 数量
if(this.list[ind].three>1){
this.list[ind].three--;
}
// 小计：
this.list[ind].four=this.list[ind].two*this.list[ind].three;
// 总价：
this.zongjia();
},
zongjia:function(){
for(var i=0,lis=0;i<this.list.length;i++){
lis+=this.list[i].four;
}
this.arrs=lis;
}
}
})
new Vue({
el:'.container'
})
</script>
</body>
</html>
