<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单购物车</title>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
<style>
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="list in shopLists">
<input type="checkbox" v-model="list.checked" @click="checkList(list)">
{{list.name}}
<span>￥{{list.prize}}</span>
<span @click="add(index)">+</span>
<input type="text" v-model="list.count" style="width: 40px;">
<span @click="reduce(index)">-</span>
</li>
</ul>
<div>
全选
<input type="checkbox" v-model="isAllChecked" @click="checkAllList">
<span>
总价{{total}}
</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
shopLists: [
{id: 1, name: '小姐姐1', prize: 20, count: 1, checked: false},
{id: 2, name: '小姐姐2', prize: 30, count: 2, checked: false},
{id: 3, name: '小姐姐3', prize: 40, count: 3, checked: false}
],
isAllChecked: false,
checkedListData: []
},
computed: {
isSelctedShop() {
let newArr = this.shopLists.filter(item => {
return item.checked === true
})
if(newArr.length > 0) {
return true
}else{
return false
}
},
total() {
return this.checkedListData.reduce((prve, current) => {
return prve + current.prize * current.count
},0)
}
},
methods: {
checkList(list) {
list.checked = !list.checked
if (list.checked) {
this.checkedListData.push(list)
} else {
this.checkedListData = this.checkedListData.filter(list1 => {
return list1.id !== list.id
})
}
this.isAllChecked = this.shopLists.every(list => {
return list.checked
})
},
checkAllList() {
this.isAllChecked = !this.isAllChecked
if (this.isAllChecked) {
this.checkedListData = this.shopLists
} else {
this.checkedListData = []
}
this.shopLists.forEach(list => {
list.checked = this.isAllChecked
})
}
},
})
</script>
</body>
</html>
网友评论