vue基础案例3 - 提交表单
程序员文章站
2022-05-29 23:12:17
...
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<style>
[v-cloak]{
display:none;
}
*{
margin: 0;
padding: 0;
}
body{
font: 15px/1.3 'Open Sans',sans-serif;
color: #5e5b64;
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: #61a1bc;
border-radius: 2px;
box-shadow: 0 1px 1px #ccc;
width: 400px;
padding: 35px 60px;
margin: 50px auto;
}
form h1{
color: #fff;
font-size: 64px;
font-family: 'Cookie',cursive;
font-weight: normal;
line-height: 1;
text-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
form ul{
list-style: none;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 20px 0 150px;
}
form ul li{
padding: 20px 30px;
background: #e35885;
margin-bottom: 8px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
cursor: pointer;
}
form ul li span{
float: right;
}
form ul li.active{
background-color: #8ec16d;
}
div.total{
border-top: 1px solid rgba(255,255,255,0.5);
padding: 15px 30px;
font-size: 20px;
font-weight: bold;
text-align: left;
color: #fff;
}
div.total span{
float: right;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="main" v-cloak>
<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> <!-- currency输出金钱以及小数点 -->
</li>
</ul>
<div class="total">
Total:<span>{{total() | currency}}</span>
</div>
</form>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script>
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;
}
}
});
</script>
</body>
</html>