基于Vue.js的购物车界面搭建

这是一个关于图书购物车界面的实现方法。点击购买数量的加减可以修改购买数量,可以移除某一项,最后能算总价格。

思路比较简单。第一步先是界面搭建,把表格画出来。定好写死部分的内容,数据部分由于是动态的所以只需要把空格子画出来就可以。在js文件里写好数据,然后用v-for显示出各项数据(v-for放在tr而不是td),这样基本的显示就ok了。

第二步加入一个叫做过滤器的东西。为什么要加这个东西呢?显示价格需要保留两位小数,并且加入货币单位,这个操作可以进行复用。当然用method也是可以的,但是vue有一个专门处理这块效果的东西叫做filter,用它进行格式化输出。

第三步让它支持改变购买数量。向显示购买数量的单元格添加两个button,并且监听点击事件,如果要增加就让this.books[index].count++,如果要减少就让它–,但是要注意不能减到1以下,0也不行,所以要加入一个值是否大于1的判断。然后可以用v-bind动态修改一个disabled,当数量为1时禁用减按钮的点击。

第四步加入移除按钮事件和总价格计算。移除按钮要监听一个删除事件,但是不能直接用pop和shift,因为我也有可能在中间删除,所以用的是this.books.splice(index,1);。总价格计算使用计算属性,用let变量,然后就是简单的for循环统计价格,并且返回价格,然后用过滤器格式化输出。

第五步加入判定购物车为空,在table标签外面套一个div写v-if,判断books.length是不是0,如果是0就不显示那个div,显示v-else所在的div,这个div里显示购物车为空。

完成效果:

购物车.html文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue购物车</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table border="0" cellspacing="" cellpadding="">
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice(item.price)}}</td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">
-
</button>
{{item.count}}
<button @click="increment(index)">
+
</button>
</td>
<td><button @click="remove(index)">移除</button></td>
</tr>
</table>
<h3>总价格:{{totPrice | showPrice(totPrice)}}</h3>
</div>
<div v-else>
<h2>购物车为空</h2>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

style.css文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}

th, td {
padding: 8px 16px;
border: 1px solid #E9E9E9;
text-align: left;
}

th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}

main.js文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '计算机组成原理',
date: '2008-01',
price: 58.50,
count: 1,
}, {
id: 2,
name: '计算机网络',
date: '2017-01',
price: 26.80,
count: 1,
}, {
id: 3,
name: '数据结构',
date: '2015-02',
price: 30.80,
count: 1,
}, {
id: 4,
name: '操作系统',
date: '2014-05',
price: 35.80,
count: 1,
},
],
},
computed: {
totPrice() {
let sum = 0;
for (let i = 0; i < this.books.length; i++) {
sum += this.books[i].price * this.books[i].count;
}
return sum;
},
},
methods: {
increment(index) {
this.books[index].count++;
},
decrement(index) {
if (this.books[index].count > 1)
this.books[index].count--;
},
remove(index) {
this.books.splice(index,1);
},
},
filters: {
showPrice(price) {
return '¥' + price.toFixed(2);
}
}
});
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信