/ 隐藏未编译的数据绑定，直到Vue实例成功加载 /
[v-cloak]{
display: none;
}
*{
padding: 0;
margin: 0;
}
body{
font: 15px/1.3 "微软雅黑";
color: #545b64;
text-align: center;
}
a,a:visited{
outline: none;
color: #389dc1;
}
a:hover{
text-decoration: none;
}
section,footer,header,aside,nav{
display: block;
}

/-------------------------
The order form
--------------------------/

form{
background-color: #d5d5d5;
border-radius: 10px;
box-shadow: 0 1px 1px #ccc;
width: 400px;
padding: 35px 45px;
margin: 50px auto;
box-shadow: 1px 0px 20px #f5f5f5;
}

form h1{
color:#fff;
font-size: 55px;
font-family: "微软雅黑"
font-weight: normal;
line-height:1;
text-shadow:2px 3px 0 rgba(0,0.1);
font-weight: normal;
}

form ul{
list-style:none;
color:#fff;
font-size:20px;
font-weight:bold;
text-align: left;
margin:20px 0 15px;
}

form ul li{
padding:15px 30px;
background-color:#03c03c;
margin-bottom:10px;
box-shadow:0 1px 1px rgba(0,0.1);
cursor:pointer;
}

form ul li span{
float:right;
}

form ul li.active{
background-color: orange;
}

div.total{
border-top:1px solid rgba(255,255,0.5);
padding:15px 30px;
font-size:20px;
font-weight:bold;
text-align: left;
color:#fff;
text-shadow: 2px 2px 2px rgba(0,0.1);
}

div.total span{
float:right;
}

价格计算器

<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{'active': service.active}">

{{service.name}} {{service.price | currency}}

<div class="total">

总价: {{total() | currency}}