<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../../static/vue.js"></script>
<script src="../../static/axios.min.js"></script>
<title>Vue练习</title>
<style>
.chd{
text-align:center;
background-color: aquamarine;
width: 50%;
}
.zg{
background-color:greenyellow;
}
</style>
</head>
<body>
<div id="app" align="center">
<h3>Vue练习</h3>
<div class="chd" v-for="item in list" >
<div @click="chd(item)" v-bind:class="{zg:item.status}"><span>{
{item.name}}</span> <span>{
{item.price | aaa}}</span></div>
</div>
<div>总价:{
{money() | aaa}}</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:function (){
return{
list:[{
price: 3999,
name: "VUE",
status:false
}, {
price: 2888,
name: "CSS",
status:false
}, {
price: 1999,
name: "HTML",
status:false
}]
}
},
methods:{
chd(index){
index.status =!index.status;
},
money:function (){
var money=0;
this.list.forEach(function (s){
if (s.status){
money+=s.price;
}
});
return money;
}
}
})
</script>
</body>
</html>The effect is as follows, the amount can be calculated when selected, and it can be canceled by clicking again.
