一、简单购物车
1.勾选显示总价购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.trCenter {
text-align: right;
}
</style>
</head>
<body>
<div id="MyDiv">
<div class="container-fluid">
<div class="row ">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>我的购物车</h1><span><button class="btn btn-primary" @click="showCar">展开我的购物车</button></span>
<hr>
<div v-show="show">
<table class="table table-bordered">
<thead>
<tr class="trCenter">
<th>#</th>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
<th>选择</th>
<th v-if="showEachPrice">单项总价</th>
</tr>
</thead>
<tbody>
<tr class="text-center" v-for="item of goodsList">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td><input type="checkbox" v-model="carList" :value="item"></td>
</tr>
</tbody>
</table>
<hr>
<h2>我的购物车商品总价为：{{allPrice()}}</h2>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#MyDiv',
data: {
name: 'jack',
goodsList: [{id: 1, name: '一加11', price: 3999, num: 2, stock: 15},
{id: 2, name: '一加ACE 2', price: 2799, num: 3, stock: 20},
{id: 3, name: '红米K60', price: 2999, num: 1, stock: 19},
{id: 4, name: '真我GT NEO5', price: 2699, num: 4, stock: 9}
],
carList: [],
show: false
},
methods: {
showCar() {
this.show = !this.show
},
allPrice() {
var total = 0
this.carList.forEach((item) => {
total += item.price * item.num
})
return total
}
}
})
</script>
</body>
</html>
2.带全选、带调整数量、带删除的购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="MyDiv">
<div class="container-fluid">
<div class="row ">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>我的购物车</h1><span><button class="btn btn-primary" @click="showCar">展开我的购物车</button></span>
<hr>
<div v-show="show">
<table class="table table-bordered">
<thead>
<tr class="trCenter">
<th>#</th>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
<th>选择
全选<input type="checkbox" v-model="choiceAll" @change="choiceAllFunc"></th>
</tr>
</thead>
<tbody>
<tr class="text-center" v-for="item of goodsList">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button class="btn btn-danger" @click="reduceNumFunc(item)">-</button>
{{item.num}}
<button class="btn btn-primary" @click="addNumFunc(item)">+</button>
</td>
<td><input type="checkbox" v-model="carList" :value="item" @change="handelCheck"></td>
</tr>
</tbody>
</table>
<hr>
<h2>我的购物车商品总价为：{{allPrice()}}</h2>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#MyDiv',
data: {
name: 'jack',
goodsList: [{id: 1, name: '一加11', price: 3999, num: 2, stock: 15},
{id: 2, name: '一加ACE 2', price: 2799, num: 3, stock: 20},
{id: 3, name: '红米K60', price: 2999, num: 1, stock: 19},
{id: 4, name: '真我GT NEO5', price: 2699, num: 4, stock: 9}
],
detailGoodsList: [{id: 1, name: '一加11', price: 3999, num: 2, stock: 15},
{id: 2, name: '一加ACE 2', price: 2799, num: 3, stock: 20},
{id: 3, name: '红米K60', price: 2999, num: 1, stock: 19},
{id: 4, name: '真我GT NEO5', price: 2699, num: 4, stock: 9}
],
carList: [],
show: false,
choiceAll: false
},
methods: {
showCar() {
this.show = !this.show
},
allPrice() {
var total = 0
this.carList.forEach((item) => {
total += item.price * item.num
})
return total
},
choiceAllFunc() {
var _this = this
if (_this.choiceAll) {
_this.carList = _this.goodsList
} else {
_this.carList = []
}
},
handelCheck() {
if (this.carList.length === this.goodsList.length) {
this.choiceAll = true
}
},
reduceNumFunc(item) {
if (item.num < 1) {
var res = confirm(
'商品数量不能小于0，按下确认将删除该商品'
)
if (res){
this.goodsList.splice(item.id-1,1)
}
} else {
item.num--
}
},
addNumFunc(item) {
if(item.num > item.stock){
alert('超出商品库存')
}
else {
item.num++
}
}
}
})
</script>
</body>
</html>
二、回忆一下可变、不可变
python一切皆对象，没有值和引用,对象都是引用，是作者加的可变和不可变来区分
其实python变量都是指向一个内存地址，这个地址又指向真正的值
# python
-不可变类型：数字，字符串，元组
-可变类型：列表，字典，集合
-python中没有值类型和引用类型的叫法----【因为python一切皆对象，对象都是地址都是引用】
-可变类型当参数传到函数中，在函数中修改会影响原来的
-不可变类型当参数传到函数中，在函数中修改不会影响原来的
# python 函数参数传递是值传递还是引用传递？ 这个问题不应该有
# js 传入了item 对象，在函数中修改，影响了原来的
-js 的对象是引用类型
三、v-model进阶
使用格式：
v-model.lazy="carList" #实际也是修饰符
lazy
input框失去焦点时页面再局部小刷新
number（可以用于手机号输入）
数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim
去除首位的空格
四、与后端交互（重点）
axios发送ajax请求
是vue的第三方模块，基于xmlhttprequest封装的
1.
今日注意：
1.写购物车时，总价函数中，循环数组用了for xx in 取不到！得用for xx of ！！！ in 在JS中是拿数组的索引值
2.依旧是写购物车，<input type="checkbox" v-model="carList" :value="item">，是:value="item"
3. a.forEach(
(item)=>{console.log(item)}
)
4.js中，Item对象被传入函数，因为js的对象是引用类型，在函数中修改，原来的也被影响了
5.el: '#myDiv' 不用加（）
6.跨域：只要向不是地址栏中的域发请求，拿到的数据会被浏览器拦截