基本购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-6" style="margin-top: 20px">
<h1>购物车案例</h1>
<table class="table table-bordered">
<tr>
<td>商品名字</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="data"></td>
</tr>
</table>
<br>
选中的商品：{{checkGroup}}
<br>
总价格:{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
},
methods: {
getPrice() {
var total = 0
//方式一： i是索引,循环选中的商品，基于迭代的循环
// for (i in this.checkGroup) {
// total += this.checkGroup[i].price * this.checkGroup[i].number
// }
//方式二： 基于索引的循环
// for (var i=0;i<this.checkGroup.length;i++) {
// total += this.checkGroup[i].price * this.checkGroup[i].number
// }
//方式三： 基于迭代 for of
// for (v of this.checkGroup) {
// total += v.price * v.number
// }
// 方式四：forEach 可迭代对象(数组)的方法
this.checkGroup.forEach((v,i)=> {
total += v.price * v.number
})
return total
}
}
})
</script>
</html>
全选全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-6" style="margin-top: 20px">
<h1>购物车案例</h1>
<table class="table table-bordered">
<tr>
<td>商品名字</td>
<td>价格</td>
<td>数量</td>
<td>全选/全不选 <input type="checkbox" v-model="allCheck" @change="handleAll"></td>
</tr>
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="data" @change="checkOne"></td>
</tr>
</table>
<br>
选中的商品：{{checkGroup}}
<br>
总价格:{{getPrice()}}
<br>
是否全选:{{allCheck}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
allCheck:false
},
methods: {
getPrice() {
var total = 0
this.checkGroup.forEach((v, i) => {
total += v.price * v.number
})
return total
},
handleAll(){
if(this.allCheck){
this.checkGroup=this.dataList
}else {
this.checkGroup=[]
}
},
checkOne(){
// if(this.checkGroup.length==this.dataList.length){
// this.allCheck=true
// }else {
// this.allCheck=false
// }
// js中 == 和 === 区别：==比较的是值，===值和类型
this.allCheck=(this.checkGroup.length===this.dataList.length)
}
}
})
</script>
</html>
商品数量增加与减少
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-6" style="margin-top: 20px">
<h1>购物车案例</h1>
<table class="table table-bordered">
<tr>
<td>商品名字</td>
<td>价格</td>
<td>数量</td>
<td>全选/全不选 <input type="checkbox" v-model="allCheck" @change="handleAll"></td>
</tr>
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>
<button @click="handleCount(data)">-</button>
{{data.number}}
<button @click="data.number++">+</button>
</td>
<td><input type="checkbox" v-model="checkGroup" :value="data" @change="checkOne"></td>
</tr>
</table>
<br>
选中的商品：{{checkGroup}}
<br>
总价格:{{getPrice()}}
<br>
是否全选:{{allCheck}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
allCheck: false
},
methods: {
getPrice() {
var total = 0
this.checkGroup.forEach((v, i) => {
total += v.price * v.number
})
return total
},
handleAll() {
if (this.allCheck) {
this.checkGroup = this.dataList
} else {
this.checkGroup = []
}
},
checkOne() {
// if(this.checkGroup.length==this.dataList.length){
// this.allCheck=true
// }else {
// this.allCheck=false
// }
// js中 == 和 === 区别：==比较的是值，===值和类型
this.allCheck = (this.checkGroup.length === this.dataList.length)
},
handleCount(item) {
if (item.number == 1) {
alert("不能再少了，受不了了")
} else {
item.number--
}
}
}
})
</script>
</html>
浙公网安备 33010602011771号