<!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>
简单购物车
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 知道mobx这个东西 很久了 大概也就1个多月了吧但是从来没有下笔写过代码这两天尝试了一下 大概去熟悉了一下...
