用java打出购物金额结算,vue购物车金额结算

window.onload = function() {

var vm = new Vue({

el: '#app',

data: {

items: [{

id: 1,

name: "苹果",

price: 10,

count: 1,

url: "http://www.jq22.com/img/cs/500x500-1.png"

},

{

id: 2,

name: "蝴蝶",

price: 8,

count: 5,

url: "http://www.jq22.com/img/cs/500x500-2.png"

},

{

id: 3,

name: "小狗",

price: 100,

count: 1,

url: "http://www.jq22.com/img/cs/500x500-3.png"

},

{

id: 4,

name: "鲜花",

price: 10,

count: 1,

url: "http://www.jq22.com/img/cs/500x500-4.png"

}

],

search: ""

},

methods: {

},

filters: { //过滤器

numFilter: function(data, n) { //data==item.price 当前过滤的数据 n==2

return "￥" + data.toFixed(n)

}

},

computed: { //计算属性

totalCount: function() {

var n = 0;

this.items.forEach((v, i) => {

n += v.count

});

return n;

},

totalPrice: function() {

var money = 0;

this.items.forEach((v, i) => {

money += v.count * v.price

});

return money;

},

searchFor: function() {

if (!this.search) {

return this.items

}

return this.items.filter((v, i) => {

if (v.name.indexOf(this.search) !== -1) { //匹配成功

return v

}

})

}

}

})

}