</ul>
<div class="total">
<!-- 计算所有选定商品的总价格，并且格式化为货币显示方式 -->
总价: <span>{{total() | currency}}</span>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">
// 定义一个常规过滤器currency
Vue.filter('currency', function(value){
return '￥' + value.toFixed(2);
});
var demo = new Vue({
el: '#main',
data: {
// 定义model属性，view将会循环
// 通过services数组产生一个li
// 定义services每一项的元素
services: [
{
name: "网站开发",
price: 300,
active: true
},
{
name: "设计",
price: 400,
active: false
},
{
name: "一体化整合",
price: 250,
active: false
},
{
name: "操作培训",
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>
