<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<my></my>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my',{
template:`
<div>
<my1 v-bind:num1="msg"></my1>
</div>
`,
data:function(){
return{
msg:[
{num:"1", name:"袜子", price:"5", you:"0"},
{num:"2", name:"外套", price:"180", you:"0"},
{num:"3", name:"杨梦娇", price:"1", you:"0"}
]
}
}
})
Vue.component('my1',{
props:['num1'],
template:`
<table border="" cellspacing="0" width="800px">
<tr>
<td>编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr v-for="(l,index) in num1">
<td >{{l.num}}</td>
<td>{{l.name}}</td>
<td>{{l.price}}</td>
<td>
<button v-on:click="jian(index)">-</button>
{{l.you}}
<button v-on:click="alk(index)">+</button>
</td>
<td>{{l.price*l.you}}</td>
</tr>
<tr>
<td colspan="5">总价:{{zong}}</td>
</tr>
</table>
`,
data:function(){
return{
zong:'0'
}
},
methods:{
alk:function(index){
this.num1[index].you++;
var total = 0;
this.num1.forEach(function (l,index) {
total += l.price*l.you;
});
this.zong=parseFloat(total);
},
//减少
jian:function(index){
if( this.num1[index].you>1){
this.num1[index].you--;
}
var total = 0;//临时总价
this.num1.forEach(function (l,index) {
total += l.price*l.you;
});
this.zong=parseFloat(total);
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
网友评论