console
var demo = new Vue({
el:'#main',
data:{
services:[
{
name:'Web Development',
price:300,
active:true
},
{
name:'design',
price:400,
active:false
},
{
name:'integration',
price:250,
active:false
},
{
name:'Training',
price:220,
active:false
}
],
},
methods:{
toggleActive:function(s){
s.active = !s.active;
},
total:function(){
var total = 0;
this.services.forEach(function(s){
if(s.active){
total += s.price;
}
});
return total;
}
}
});
<form action="" id="main">
<h1>services</h1>
<ul>
<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{'active':service.active}">
{{ service.name }}<span>{{ service.price | currency }}</span>
</li>
</ul>
<div class="total">
Total: <span> {{ total() | currency }} </span>
</div>
</form>
*{
margin: 0;
padding: 0;
}
li,.total{
margin: 10px;
padding: 10px;
width: 300px;
background-color: #999;
}
li span,.total span{
float: right;
}
.total{
background-color: #333;
color: #fff;
}
.active{
background-color: #f00;
}