[javascript]代码库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font-family:Microsoft YaHei;
}
li{list-style:none;}
div{
width:400px;
background-color:#61a1bc;
margin:50px auto;
padding:35px 60px;
}
h1{
font-size:44px;
text-align:center;
}
ul{
font-size:20px;
text-align:left;
margin:20px 0 15px;
}
ul li{
padding:20px 30px;
background-color:#e35885;
margin-bottom:8px;
cursor:pointer;
}
ul li span{float:right;}
ul li.active{
background-color:#8ec16d;
}
p{
border-top:1px solid rgba(255,255,255,0.5);
padding:15px 30px;
font-size:20px;
text-align: left;
}
p span{float:right;}
</style>
</head>
<body>
<div id="main" v-cloak>
<h1>Services</h1>
<ul>
<li v-for="item in items" @click="toggleActive(item)" :class="{'active':item.active}">{{item.name}}<span>{{item.price | currency}}</span></li>
</ul>
<p>Total: <span>{{total() | currency}}</span></p>
</div>
</body>
<script type="text/javascript">
var demo = new Vue({
el: '#main',
data: {
items: [
{
name: 'Web Development',
price: 300,
active:false
},{
name: 'Design',
price: 400,
active:false
},{
name: 'Integration',
price: 250,
active:false
},{
name: 'Training',
price: 220,
active:false
}
]
},
methods: {
toggleActive: function(i){
i.active = !i.active;
},
total: function(){
var total = 0;
this.items.forEach(function(s){
if (s.active){
total+= s.price;
}
});
return total;
}
}
});
</script>
</html>
会python真的可以为所欲为0(回)
9天前
这里还有人吗1(回)
194天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
419天前
鸽子
0(回)
503天前