Vue购物车功能
2018-12-24 本文已影响0人
咸鱼前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="container">
<div class="row">
<table class="table table-border table-hover">
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="text-primary text-center h2">购物车</div>
</div>
<tr>
<th>全选<input type="checkbox" v-model="checkAll"></th>
<!-- 这里的全选的选中状态是根据下面商品的选中状态来计算的，所以我们这里写在计算属性中 -->
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr v-for="(item, index) in productLists"><!-- 循环从json拿到的数据 -->
<td><input type="checkbox" v-model="item.isSelected"></td>
<td>
<img :src="item.productCover" :alt="item.productName"><!-- v-bind的缩写 -->
{{item.productInfo}}
</td>
<td>{{item.productPrice}}</td>
<td><input type="number" v-model.number="item.productCount" min="1"></td>
<!-- 只能输入数字，限制最小值是1 -->
<td>{{item.productPrice * item.productCount | toFixed(2)}}</td><!-- 这里直接是单价乘数量算出小计，“|”是管道符，后面跟着自定义的过滤函数，传一个参数给过滤函数。 -->
<td><button class="btn btn-danger" @click="remove(item)">删除</button></td>
<!-- 给删除按钮绑定一个点击事件，传入item给点击事件 -->
</tr>
<tr>
<td colspan="6">总价：￥{{ sum | toFixed(2) }}</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
productLists: [],
},
filters: {
toFixed (input, param1) {//这里的input是值管道符前面的运算结果,param1是定义一个变量接收过滤函数传过来的参数
return input.toFixed(param1);
},
},
computed: {
checkAll: {
get () {//在第一次页面加载过程中，checkAll就会调用get方法，获取当前自己应该是什么状态。
return this.productLists.every(item => {//用every方法，因为如果数组中有一个是false，every方法就会返回false，跟我们的全选是一样的，有一个没选中就是false。
return item.isSelected;//找到false，返回false
});
},
set (val) {//当我们改变全选的选中框，就会得到一个参数，这个参数代表的是我们改变全选框之后的状态。
this.productLists.forEach(item => {//这里用循环数组的方法来给每一个商品的选中进行赋值，跟全选的输入框是同一个状态。
return item.isSelected = val;
})
},
},
sum () {//如果写成函数形式，默认使用get方法，因为是总价，所以是不能有set方法
return this.productLists.reduce((prev, next) => {//
if (!next.isSelected) return prev;//如果商品是没有选中状态的，将直接返回prev，不计算本轮。
return prev+next.productPrice*next.productCount;//第一次的prev给默认指定是0，所以next是第一个商品，直接是第一个商品的数量乘价格。reduce每一轮循环返回的数值就是下一轮的prev。所以这对每一个选中的商品进行求和
},0)//这个0是指定默认的第一次的prev是0
}
},
created () {//实例加载完成后执行,this指向实例
this.getData();//页面第一次加载过程中执行请求商品数据
},
methods: {
getData () {
axios.get("cars.json").then( res => {
this.productLists = res.data;
//将axios拿到的数据赋值给vue的productLists，这里用箭头函数是想this指向实例。
}, err => {
console.log(err);
})
},
remove (val) {//定义一个变量来接收传过来的参数
var comfirmResult = confirm("确定删除吗？");//给一个反悔的机会，确认才会删除数据
if(comfirmResult){//如果点击确认，返回的是true，所以删除，取消则不操作
this.productLists = this.productLists.filter(item => {
//给productLists来一个过滤函数，将数组的每一项进行对比，如果跟传过来的参数对比，不相等的就返回到新的数组，然后赋值给原有的productLists，从而达到删除当前点击的那一项数据。
return item !== val;
});
}
}
}
})
</script>
</body>
</html>
