v-bind:class="{red:item.bool,green:!item.bool}" 用来进行颜色切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的小超市结算</title>
<script src="js/vue.min.js" type="text/javascript"></script>
<style type="text/css">
.red{
background-color: red;
}
.green{
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="a" style="width: 400px;text-align: center;margin: 0 auto;">
<h1>我的小超市</h1>
<ul style="list-style-type: none;text-align: center">
<!--点击变色并且结算-->
<li style="line-height: 70px;" v-for='(item,index) in arr' @click='change(index)' v-bind:class="{red:item.bool,green:!item.bool}" >{{ item.des+"------"+item.price }}</li><!--v-bind:class='{item.color}'-->
</ul>
<h2>总计:{{ total}}元</h2>
</div>
<script>
var vm=new Vue({
el:"#a",
data:{
arr:[
{des:'火腿',price:500,bool:false},
{des:'方便面',price:500,bool:false},
{des:'薯片',price:500,bool:false},
{des:'虾条',price:500,bool:false},
{des:'冰淇淋',price:500,bool:false},
{des:'巧克力',price:500,bool:false}
],
total:0,
},
methods:{
change:function (index) {
this.total=0;
this.arr[index].bool=!this.arr[index].bool;
for(var i=0;i<this.arr.length;i++){
if (this.arr[i].bool==true) {
this.total+=this.arr[i].price;
}
}
}
}
});
</script>
</body>
</html>