<template>
<div>
<!-- //v-model.lazy 失去焦点的一刻数据同步 .trim 不会出现空格 -->
<div>
<input type="checkbox" @change="handchange" v-model="isAllcheck">
</div>
<div v-for="(item,index) in list" :key='index'>
<input type="checkbox" v-model="total" :value="item" @change="danchange">
价钱： {{ item.price}}
数量： {{item.number}}
<button @click="item.number++">加</button>
{{item.number}}
<button @click="del(item)">减</button>
</div>
{{total}}
<p>总金额：{{getsum()}}</p>
</div>
</template>
<script>
export default {
name: 'shopping',
data() {
return {
list: [{
number: '3',
name: '饮料',
price: '5',
id: '1'
},
{
number: '7',
name: '篮球',
price: '100',
id: '2'
},
{
number: '6',
name: '乒乓球',
price: '7',
id: '3'
},
{
number: '100',
name: 'nike',
price: '1000',
id: '4'
},
],
total: [],
isAllcheck: false //全选绑定属性
}
},
methods: {
//计算总价
getsum() {
var prices = 0
let totals = this.total
totals.map(item => {
return prices += item.number * item.price
})
return prices
},
//全选全不选
handchange() {
if (this.isAllcheck) {
this.total = this.list
} else {
this.total = []
}
},
//反选
danchange() {
if (this.total.length === this.list.length) {
this.isAllcheck = true
} else {
this.isAllcheck = false
}
},
// 商品--
del(item) {
let num = item.number--
if (num === 1) {
item.number = 1
}
}
}
}
</script>
<style lang="scss" scoped>
</style>