<!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="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<table border="1">
<tr>
<th v-for="value in list">{{value}}</th>
</tr>
<tr v-for="(val,index) in content">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.price}}</td>
<td><button @click="alt(index)">+</button>{{val.cont}}<button @click="res(index)">-</button></td>
<td>{{val.all}}</td>
</tr>
<my-child v-bind:mes="msg"></my-child>
</table>
</div>
`,
data:function(){
return{
list:["编号","名称","单价","数量","小计"],
content:[
{name:"香蕉",price:1,cont:1,all:1},
{name:"苹果",price:2,cont:1,all:2},
{name:"鸭梨",price:3,cont:1,all:3}
],
msg:'6'
}
},
methods:{
alt:function(i){
this.content[i].cont++;
this.content[i].all=this.content[i].cont*this.content[i].price;
this.total();
},
res:function(i){
if(this.content[i].cont>0){
this.content[i].cont--;
this.content[i].all=this.content[i].cont*this.content[i].price;
}
this.total();
},
total:function(){
for(var i=0,total=0;i<this.content.length;i++){
total+=this.content[i].all;
}
this.msg=total;
}
}
})
Vue.component("my-child",{
props:["mes"],
template:`
<tr>
<td colspan="5">总价：{{mes}}元</td>
</tr>
`
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
网友评论