<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 10px;
}
#app {
margin: 20px auto;
width: 1000px;
}
img {
width: 100px;
height: 100px;
vertical-align: middle;
border-radius: 8px;
}
.numFrame {
display: inline-block;
}
.plusbox {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 5px;
background: #A1A1A1;
cursor: pointer;
color: #fff;
}
.numFrame input {
width: 60px;
height: 20px;
padding-left: 5px;
border: 1px solid #A1A1A1;
border-radius: 5px;
}
</style>
<script src="js/main.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="index">
<input type="checkbox" v-model="item.isCheck" @change="sigleClick"/>
<img src="img/aa.jpg" />
<span>{{item.price.toFixed(2)}}</span>
<div class="numFrame">
<span class="plusbox" @click="add(index)">+</span>
<input type="text" v-model="item.num"/>
<span class="plusbox" @click="reduce(index)">-</span>
</div>
<span>{{(item.price*item.num).toFixed(2)}}</span>
<span style="color:red" @click="delecClick(index)">删除</span>
</li>
</ul>
<div>
<input type="checkbox" @change="totalChecked" v-model="CheckedList.isChecked"/>全选
合计: <span style="color:red">{{totalNum}}</span> 件商品
共计: <span style="color:red">{{totalPrice.toFixed(2)}}</span> 元
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data() {
return {
list:[
{price:12,num:2,isCheck:false},
{price:14,num:1,isCheck:false},
{price:16,num:0,isCheck:false}
],
CheckedList:{
isChecked:false
}
}
},
computed: {
totalNum(){
var totalNum=0
for(var i in this.list){
if(this.list[i].isCheck==true){
totalNum+=this.list[i].num
}
}
return totalNum
},
totalPrice(){
var totalPrice=0
for(var i in this.list){
if(this.list[i].isCheck==true){
totalPrice+=this.list[i].price*this.list[i].num
}
}
return totalPrice
}
},
methods: {
add(index){
this.list[index].num++
},
reduce(index){
if(this.list[index].num==0){
this.list[index].num=0
}else{
this.list[index].num--
}
},
totalChecked(){
for(var i in this.list){
this.list[i].isCheck=this.CheckedList.isChecked
}
},
sigleClick(){
var singeLength=this.list.filter(function(arr){
return arr.isCheck==true
})
singeLength.length==this.list.length?this.CheckedList.isChecked=true:this.CheckedList.isChecked=false
},
delecClick(index){
for(var i in this.list){
if(this.list[i].isCheck==true){
this.list.splice(index,1)
}
}
}
}
})
</script>
</html>
