Vueはショッピングカートのシーンでの応用を実現します。
本論文の実例では、Vueのショッピングシーンの応用を共有しています。参考にしてください。具体的な内容は以下の通りです。
ショッピングカートシーンの需要:
1.商品、店舗、ショッピングカートの選択
2.商品の削除
キーコード
テストデータ
商品の対象となる店舗の対象商品群goods
商品や店舗ごとに自分のチェックフィールドがあります。
一.商品を選ぶ商品を選択します。 店舗の下のすべての商品を選択します。 ショッピングカートの中のすべての商品を選択します。
データーバインディング
商品&店舗選択イベント
セレクトショップでsetGood Checkedを実行する場合は、その店舗の下にあるすべての商品を選択します。
商品を選ぶ時にset Shop Checkedを実行します。
商品checkedがfalseの場合、現在の店舗の選択をキャンセルします。
商品checkedがtrueである場合、現在の店舗はすべての商品を選択しているかどうかを判断し、現在の店舗を選択します。そうでなければ、現在の店舗の選択をキャンセルします。
二、商品の削除
ショッピングカートシーンの需要:
1.商品、店舗、ショッピングカートの選択
2.商品の削除
キーコード
テストデータ
var _list = [{
checked: false,
goods: [{
name: " 1",
price: 23,
checked: false
}]
}, {
checked: false,
goods: [{
name: " 2",
price: 20,
checked: false
}, {
name: " 3",
price: 30,
checked: false
}]
}];
お店の対象はショッピングカーの行列です。リスト商品の対象となる店舗の対象商品群goods
商品や店舗ごとに自分のチェックフィールドがあります。
一.商品を選ぶ
<body class="app">
<input type="checkbox" v-if="list.length" v-model="checkedAll">
<div v-for="(shopI, shop) in list" class="shop">
<input type="checkbox" v-model="shop.checked">
<div v-for="(goodI, good) in shop.goods" class="good">
<input type="checkbox" v-model="good.checked">
<span v-html="good.name"></span>
<span v-html="good.age"></span>
</div>
</div>
</body>
var vue = new Vue({
el: '.app',
data: {
list: _list
}
});
ショッピングカートの全選択を監督します。
computed: {
checkedAll: function() {
return this.checkedShopsCount == this.list.length;
},
checkedShopsCount: function() {
var i = 0;
this.list.forEach(function(item) {
if (item.checked == true) i++;
});
return i;
}
}
店舗選択数が店舗数(list.length)に等しい場合、ショッピングカートは全てtrueとなります。商品&店舗選択イベント
<input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
<div v-for="(shopI, shop) in list">
<input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
<div v-for="(goodI, good) in shop.goods">
<input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
<span v-html="good.name"></span>
<span v-html="good.age"></span>
</div>
</div>
methods: {
setAllChecked: function(e) {
this.list.forEach(function(shop) {
shop.checked = e.target.checked;
shop.goods.forEach(function(good) {
good.checked = e.target.checked;
});
});
},
setGoodChecked: function(shop) {
shop.goods.forEach(function(good) {
good.checked = shop.checked;
});
},
setShopChecked: function(good, shop) {
if (!good.checked) {
shop.checked = false;
} else {
// checked false
shop.checked = !shop.goods.find(function(good) {
return !good.checked;
});
}
}
}
ショッピングカートを選択する時はsetAll Checkedを実行します。この時はすべての商品と店舗を選択します。セレクトショップでsetGood Checkedを実行する場合は、その店舗の下にあるすべての商品を選択します。
商品を選ぶ時にset Shop Checkedを実行します。
商品checkedがfalseの場合、現在の店舗の選択をキャンセルします。
商品checkedがtrueである場合、現在の店舗はすべての商品を選択しているかどうかを判断し、現在の店舗を選択します。そうでなければ、現在の店舗の選択をキャンセルします。
二、商品の削除
<input type="button" value=" " @click="deleteGood(shop,goodI,list,shopI)">
methods: {
deleteGood: function(shop,goodI,list,shopI) {
shop.goods.splice(goodI, 1);
if (shop.goods.length==0) {
list.splice(shopI, 1);
}
}
}
すべてのコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="vue.min.js"></script>
</head>
<body class="app">
<input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
<div v-for="(shopI, shop) in list">
<input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
<div v-for="(goodI, good) in shop.goods">
<input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
<span v-html="good.name"></span>
<span v-html="good.age"></span>
<input type="button" value=" " @click="deleteGood(shop,goodI,list,shopI)">
</div>
</div>
</body>
<script>
var _list = [{
checked: false,
goods: [{
name: " 1",
money: 23,
checked: false
}]
}, {
checked: false,
goods: [{
name: " 2",
money: 20,
checked: false
}, {
name: " 3",
money: 30,
checked: false
}]
}];
var vue = new Vue({
el: '.app',
data: {
list: _list
},
computed: {
checkedAll: function() {
return this.checkedShopsCount == this.list.length;
},
checkedShopsCount: function() {
var i = 0;
this.list.forEach(function(item) {
if (item.checked == true) i++;
});
return i;
}
},
methods: {
setGoodChecked: function(shop) {
shop.goods.forEach(function(good) {
good.checked = shop.checked;
});
},
setShopChecked: function(good, shop) {
if (!good.checked) {
shop.checked = false;
} else {
shop.checked = !shop.goods.find(function(good) {
return !good.checked;
});
}
},
setAllChecked: function(e) {
this.list.forEach(function(shop) {
shop.checked = e.target.checked;
shop.goods.forEach(function(good) {
good.checked = e.target.checked;
});
});
},
deleteGood: function(shop, goodI, list, shopI) {
shop.goods.splice(goodI, 1);
if (shop.goods.length == 0) {
list.splice(shopI, 1);
}
}
}
});
</script>
</html>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。