会python真的可以为所欲为0(回)
355天前
这里还有人吗1(回)
540天前这里还有人吗0(回)
540天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
765天前到处都是羊，不想上班0(回)
845天前
鸽子
0(回)
849天前<!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> |
