零基础学习Vue:第16课 Vue实现京东商城购物车小案例：
实现后的效果图：
以下是全部实现代码注解很详细哦！如有疑惑可以评论留言：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!-- 引入 bootstrap (bootstrap是写好css样式可以直接通过clssname应用) 也可以自己写 不引用 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{
margin:0;
padding:0;
}
#app{
width:1200px;
margin:auto;
}
</style>
</head>
<body>
<!------------------------- 以下是样式效果代码 ------------------------->
<div id="app">
<table class="table table-hover">
<!-- class="h1 text-center text-success" 使用bootstrap内写好的css样式修饰 -->
<caption class="h1 text-center text-success">京东购物车</caption>
<tr>
<td>
<label>全选</label>
<!-- v-model 是否选中布尔数绑定vue内的data内的数据。 @change监听复选框点击执行selectAll方法 -->
<input type="checkbox" v-model="checkAll" @change="selectAll" >
</td>
<td>商品</td>
<td>商品描述</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<!-- 通过vue 的v-for遍历data内的数组 -->
<tr v-for="(item, index) in products">
<td>
<!-- v-model 是否选中布尔数绑定vue内的data内的数据 @change监听复选框点击执行 selectSelected 方法-->
<input type="checkbox" v-model="item.isSelected" @change="selectSelected" >
</td>
<!-- : 是 v-bind 指令的缩写-->
<td><img :src="item.imgUrl" alt=""></td>
<td>{{item.bookName}}</td>
<td>￥{{item.price}}</td>
<td><input type="number" v-model.number="item.amount"></td>
<!-- |管道符号 fixed管道函数 对管道符左侧的数据不操作 只改变在视图中的显示 -->
<td>{{ item.amount * item.price | fixed(2) }}</td>
<!-- class="btn btn-danger" 使用bootstrap内写好的css样式修饰 -->
<td><div class="btn btn-danger" @click="remove(index)">删除</div></td>
</tr>
<tr>
<!-- summary是在computed内定义的一个计算属性 -->
<td>总价:{{summary | fixed(2)}}</td>
</tr>
</table>
</div>
<!------------------------- 以下是vue代码 ------------------------->
<script>
let vm = new Vue({
el:'#app',
filters:{ //管道函数 对管道符左侧的数据不操作 只改变在视图中的显示
fixed(value,num){ //第一个参数是管道符左侧的数据
return '￥'+value.toFixed(num)+'元'
}
},
data:{
checkAll:false, //计入全选框的状态
//下面是模拟的加入购物车的数据
products:[
{
isSelected:false, //计入复选框的状态，计算总价格时需要
imgUrl:"https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg", //商品图片
bookName:'深入浅出Node.js', //购物商品名
price: 54.50, //价格
amount:1, //购买数量
},
{
isSelected:false,
imgUrl:"https://img10.360buyimg.com/cms/s80x80_jfs/t9508/97/2285719018/62961/99c5b1b7/59f299b4Nc9e78adb.jpg",
bookName:'Vue.js实战',
price: 62.4,
amount:1,
}
]
},
//methods 内定义方法
methods: {
//全选按钮
selectAll(){
//forEach() 遍历数组 将所有的
this.products.forEach((item)=>{
item.isSelected = this.checkAll; //将 数组内数据的 所有复选框的状态 定义成全选框状态
})
},
//判断是否全选
selectSelected(){
//every() 遍历数组方法 如果数组每一项指定数据都为true 则返回true
this.checkAll = this.products.every((item)=>{
return item.isSelected
})
},
//删除数组内一条数据
remove(index){
this.products.splice(index,1); //从下标index开始删除products数组的1条数据
}
},
//computed 存计算属性
computed: {
summary(){
//reduce() //数组求和方法 (pre,next) pre表示总和 next表示数组下标
return this.products.reduce((pre,next)=>{
return pre + (next.isSelected? next.price*next.amount : 0)
},0) //0 表示pre初始为0
}
},
})
</script>
</body>
</html>