1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
| <script>
let data = [{
checked: true,
id: 1,
title: 'iphone',
price: 1999,
number: 0,
rowmoney: 0
},
{
checked: true,
id: 2,
title: 'iphone',
price: 1999,
number: 0,
rowmoney: 0
}
];
new Vue({
el: '.box',
data: {
data,
message: '',
state: false
},
methods: {
rowmoney(price, index) {
//通过类名获取到钱数
var number = document.getElementsByClassName('number')[index].value;
this.data[index].number = number;
this.data[index].rowmoney = price * number;
},
check(index) {
//通过类名知道是否被选中了,从而进行赋值操作
var check = document.getElementsByClassName('check')[index].checked;
console.log(check);
this.data[index].checked = check;
}
},
computed: {
CountMoney() {
let money = 0;
this.data.forEach(item => {
if (item.checked)
money += parseInt(item.rowmoney);
})
return parseInt(money);
},
CountNumber() {
let num = 0;
this.data.forEach(item => {
if (item.checked)
num += parseInt(item.number);
})
return parseInt(num);
},
all: {
get() {
let flag = this.data.every(item => item.checked);
return flag;
},
set(newValue) {
let flag = this.data.forEach(item => {
item.checked = newValue;
})
}
}
}
})
</script> |
共 0 条评论关于"使用vue搭建购物车(简单版)"
最新评论