{{msg}}
{{item.flag}}=== 商品名称:{{item.name}}=== 商品价格:{{item.price}}===
购买数量:
type="button" value="-" @click="btnjian(index)" :disabled="item.num <= 1" />
总价: {{totle}}
var vm = new Vue({
el: "#app",
data: {
msg: "Hello Vue",
lists: [
{ id: 1, flag: false, name: "nike", price: 100, num: 1 },
{ id: 2, flag: false, name: "adidas", price: 200, num: 2 },
{ id: 3, flag: false, name: "lining", price: 300, num: 3 },
],
// totle: 0,
active: {
color: "pink",
width: "15px",
height: "15px",
},
},
methods: {
btnjian(i) {
this.lists[i].num--;
},
btnjia(i) {
this.lists[i].num++;
},
// changeHandel() {
// this.totle = 0;
// this.lists.forEach((item, index) => {
// if (item.flag) {
// this.totle += item.price * item.num;
// }
// });
// },
},
computed: {
totle() {
var result = 0;
this.lists.forEach((item, index) => {
if (item.flag) {
result += item.price * item.num;
}
});
return result;
},
},
});