vue购物车
2019-03-05 本文已影响0人
沈枷若
<html>
<head>
<title>购物车</title>
<link rel="stylesheet" href="./css/购物车.css" type="text/css" />
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="test">
<table id="mytable">
<tr>
<th><input type="checkBox" @click="selectProduct()" v-bind:checked="isSelectAll" />全选</th>
<th>书名</th>
<th>数量</th>
<th>单价</th>
<th>总价</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in productList">
<td><input type="checkBox" v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"/></td>
<td>{{item.proName}}</td>
<td>
<span><a @click="item.proNum--">-</a></span>
{{item.proNum}}
<span><a @click="item.proNum++">+</a></span>
</td>
<td>{{item.proPrice}}</td>
<td>{{item.proPrice*item.proNum}}</td>
<td><a @click="deletePro(index)">删除</a></td>
</tr>
</table>
<div class="checkPro">
<div class="left">
<span><a @click="deleteProduct">删除所选产品</a></span>
</div>
<div class="right">
<span>{{getTotal.totalNum}}本图书总计{{getTotal.totalPrice}}元</span>
</div>
</div>
</div>
</body>
<script >
new Vue({
el : "#test",
data : {
productList:[
{
'proName' :'操作系统',
'proNum' : 2,
'proPrice' :30,
},
{
'proName' :'组成原理',
'proNum' : 5,
'proPrice' :25,
},
{
'proName' :'编译原理',
'proNum' : 1,
'proPrice' :30,
}
],
},
methods:{
deletePro:function(index){
this.productList.splice(index,1);
},
deleteProduct:function(){
this.productList=this.productList.filter(function (item) {return !item.isSelect})
},
selectProduct:function(){
for (var i=0;i<this.productList.length; i++) {
this.productList[i].isSelect=true;
}
},
},
mounted:function () {
var _this=this;
this.productList.map(function (item) {
_this.$set(item, 'isSelect', true);
})
},
computed:{
getTotal:function(){
var prolist=this.productList.filter(function (val) { return val.isSelect}),
totalPri=0;
for (var i=0,len=prolist.length; i<len; i++) {
totalPri+=prolist[i].proPrice*prolist[i].proNum;
}
return {totalNum:prolist.length,totalPrice:totalPri}
},
isSelectAll:function(){
return this.productList.every(function (val) { return val.isSelect});
},
},
})
</script>
</html>
table{width: 1200px;}
table th{width: 100px}
table td{width: 200px;text-align: center;}
a{text-decoration:none;color: black}
span{font-size: 20px;margin: 10px 10px}
strong{border: 1px solid;}
.checkPro{
padding-right:450px;
padding-left:50px;
}
.left{
float: left;
}
.right{
float: right;
}
