<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="js/vue.js"></script>
<style>
body{
margin: auto;
width: 500px;
}
#div1{
width: 300px;
height: 500px;
background-color: antiquewhite;
}
#font1{
padding-top: 10px;
padding-left: 10px;
color: coral;
font-size: 20px;
}
#liename{
height: 40px;
background-color: #FF7F50;
}
#liename ul{
margin: 0 auto;
}
#liename ul li{
list-style: none;
float: left;
line-height: 40px;
padding-right: 49px;
padding-left: -20px;
}
span{
text-align:right;
padding-left: 30px;
line-height: 40px;
}
#bottom{
margin-top: 170px;
border-top: 5px solid beige;
}
#button1{
width: 200px;
height: 40px;
margin-left: 45px;
}
</style>
</head>
<body>
<!-- 1分数加减
2全选全不选
3总金额 -->
<div id="div1">
<p id="font1">购物车</p>
<div id="liename">
<ul>
<li>商品名</li>
<li>单价</li>
<li>份数</li>
</ul>
</div>
<div id="goods">
<div v-for="data in datalist">
<span><input type="checkbox" v-model="checkgroup" :value="data" @change="handlelichange()" />
{{data.name}}
</span>
<span>{{data.price}}元</span>
<span>
<button @click="handledel(data)">-</button>
{{data.number}}
<button @click="handleadd(data)">+</button>
</span>
</div>
<div id="bottom">
<span><input type="checkbox" v-model="isallcheck" @change="handlechange()" />全选</span>
<span>合计金额：{{getsum()}}</span>
<button id="button1">支付</button>
</div>
</div>
</div>
<script type="text/jscript">
new Vue({
el: "#div1",
data: {
checkgroup:[],
isallcheck:"",
datalist: [{
name: "练习册",
price: 25,
number: 2
},
{
name: "草稿纸",
price: 10,
number: 2
},
{
name: "收纳盒",
price: 15,
number: 1
}
]
},
methods: {
handlechange(){
if(this.isallcheck){
this.checkgroup=this.datalist;
}else{
this.checkgroup=[];
}
},
handlelichange(){
if(this.checkgroup.length==this.datalist.length){
this.isallcheck=true;
}else{
this.isallcheck=false;
}
},
getsum(){
var sum=0;
for(var i in this.checkgroup){
sum+=this.checkgroup[i].number*this.checkgroup[i].price;
}
return sum;
},
//商品数量加一
handleadd(data){
data.number++;
},
//商品数量减一
handledel(data){
var number=data.number--;
if(number==1){
data.number=1;
}
}
}
})
</script>
</body>
</html>
评论0