<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
<style type="text/css">
#app{width: 500px; margin: 100px auto; background: #09f; font-size: 18px;}
ul{list-style: none; padding: 0; width: 400px; margin: 0 auto; padding-top: 50px; }
li{height: 60px; display: flex; justify-content: space-between;padding: 0 10px; color: #fff;background: #f90; margin: 14px 0; align-items: center;}
p{margin: 0;}
.num{display: flex; height: 80px; align-items: center; justify-content: space-between; color: #FFFFFF; padding: 0 80px;}
span{font-weight: bold;}
.active{background: #0f9;}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :class="{active:item.isActive}" @click="click(index)"><p>{{item.name}}</p><span>${{item.price}}</span></li>
</ul>
<hr />
<div class="num"><p>Total:</p><span>${{sum}}</span></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{
name:"商品1",
price:220,
isActive:false
},
{
name:"商品2",
price:400,
isActive:false
},
{
name:"商品3",
price:300,
isActive:false
},
{
name:"商品4",
price:250,
isActive:false
},
],
sum:0
},
methods:{
click(index){
this.list[index].isActive = !this.list[index].isActive
if(this.list[index].isActive){
this.sum+=this.list[index].price;
}else{
this.sum-=this.list[index].price;
}
}
}
})
</script>
</html>
