vuejs手把手教你写一个完整的购物车实例代码
176 浏览量
2020-10-19
14:07:56
上传
评论
收藏 94KB PDF 举报
vuejs手把手教你写一个完整的购物车实例代码手把手教你写一个完整的购物车实例代码
主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
由于我们公司是主营业务是海淘，所以每个项目都是类似淘宝天猫之类的商城，那么购物车就是一个重点开发功能模块。介于之前我都是用jq来写购物车的，这次就用vuejs来写
一个购物车。下面我就从全选，数量控制器，运费，商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。
1.一层数据结构一层数据结构-全选全选
下面这段代码和vuejs官网里面checkbox绑定很像。不明白的可以直接上vuejs官网看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-全选</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration:none;
}
</style>
</head>
<body>
<label>
<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
<span>全选</span>
</label>
<div v-for="(index, item) in goodsList">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<input type="checkbox" :value="index" v-model="selectArr" />
商品名称:<span v-html="item.name"></span> |
价格:<span v-html="item.price"></span>
</a>
</div>
<label>
<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
<span>全选</span>
</label>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
var vue = new Vue({
el : 'body',
data : {
goodsList : [
{
name : '山本汉方1',
price : '19.00'
},
{
name : '山本汉方2',
price : '19.00'
},
{
name : '山本汉方3',
price : '19.00'
},
{
name : '山本汉方4',
price : '19.00'
},
{
name : '山本汉方5',
price : '19.00'
},
],
selectArr : []
},
ready : function() {},
methods : {
chooseAll : function(event) {
var oThis = this;
oThis.selectArr = [];
if ( event.currentTarget.checked ) {
oThis.goodsList.forEach(function(item , index) {
oThis.selectArr.push(index);
});
}
console.log(oThis.selectArr);
}
}
})
</script>
</body>
</html>
2.二层数据结构二层数据结构-全选全选
一层数据结构的购物车在现实中是很少看到的，比如我们最熟悉的淘宝购物车是按照店铺分的，那么必然是多层的数据结构。这次在写这个二层数据接口的全选，碰到一个很大
的坑，一开始我是用了一层数据结构的数据，发现当对象数组里面的某个值改变了，视图竟然没有触发！，所以会造成下面所有的checkbox都被选中了，最上面的那个全选
checkbox竟然还是没有被选中。感觉告诉我这是vuejs的坑，后来发现是js的坑。具体可以看这个。方法是百度到了，可是放我这里没有用（应该是版本问题）。于是我就改了数
据结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-全选</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration:none;
剩余11页未读，继续阅读
资源评论
