基于vue的购物车清单
基于vue的购物车清单
效果
实例代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
</head>
<body>
<div id="app">
<!-- bootstrap 基本样式+增强样式-->
<div class="container">
<div class="row">
<h2 class="text-warning">购物车</h2>
<table class="table table-hover table-bordered">
<tr>
<th>全选 <input type="checkbox" v-model="checkAll"></th>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<!-- 括号与in之间要加空格不然会语法错误 -->
<tr v-for="(product,index) in products">
<td><input type="checkbox" v-model="product.isSelected"></td>
<!-- 使用vue指令动态绑定图片的相关信息 -->
<td><img :src="product.productCover" :title="product.productName"
alt="1">{{product.productName}}</td>
<td>{{product.productPrice}}</td>
<td><input type="number" min="1" v-model.number.lazy="product.productCount"
onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"></td>
<!-- 通过过滤器展示更好地效果 -->
<td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
<td><button type="button" class="btn btn-danger" @click='removes(product)'>删除</button></td>
</tr>
<tr>
<td colspan="6">总价格:{{sum | toFixed(2)}} </td>
</tr>
</table>
</div>
</div>
</div>
</body>
<!-- vue基于依赖关系引入位置放哪都行 -->
<script src="node_modules\axios\dist\axios.js"></script>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
// 当给全选赋值时应要影响其他人的变化,当页面刷新时,时根据下面的
// checkbox计算出来的结果给全选赋值
computed: { //放在computed中最后也会放在vm上,不能与methods等重名
checkAll: {
//当products变化会重新计算
get() { //get和set this指向实例,v-model会获取checkAll得值,会调用get方法
return this.products.every(p => p.isSelected);
},
set(val) { //当我们给checkbox赋值的时候调用,val等于checkAll的值
this.products.forEach(p => p.isSelected = val)
}
},
//sum的值会被缓存
sum() { //将计算属性写成函数则默认调用get
return this.products.reduce((pre, next) => {
if (!next.isSelected) return pre;
return pre + next.productPrice * next.productCount;
}, 0)
}
},
filters: {
toFixed(input, num) { //第二个参数为小数点个数
return '¥' + input.toFixed(num);
}
},
//专门用来发送AJAX的方法
created() { //数据初始化会被调用,this指向的也是vm实例,钩子函数
this.getData();
},
data: {
products: [],
},
methods: {
removes(p) {
this.products = this.products.filter(item => item !== p);
},
getData() {
axios.get(
'https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json')
.then((res) => {
this.products = res.data.data; //这里需要根据自己用的接口返回的数据来赋值
// console.log(res.data);
}).catch((err) => {
console.log(err); //这里应使用箭头函数,this才能指向vm实例
});
}
}
});
</script>
</html>
- 这里使用的是本地的资源文件,如果需要使用,请将代码内的资源文件用CDN引入
想做一定有方法,不想做一定有理由。