Edit in JSRUN

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;
}

本项目引用的自定义外部资源