<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >购物车实例</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div id = "app" v-cloak> < template v-if = "list.length" > < table > < thead > < tr > < th >< input type = "checkbox" @ click = 'checkAll' :checked = 'allCheck' ></ th > < th >序号</ th > < th >商品名称</ th > < th >商品单价</ th > < th >购买数量</ th > < th >操作</ th > </ tr > </ thead > < tbody > < tr v-for = "(item,index) in list" > < td >< input type = "checkbox" :checked = 'item.isChecked' @ click = "singleCheck(index)" ></ td > < td >{{index + 1}}</ td > < td >{{item.name}}</ td > < td >{{item.price}}</ td > < td > < button @ click = "handleReduce(index)" :disable = "item.count === 1 " >-</ button > {{item.count}} < button @ click = "handleAdd(index)" >+</ button > </ td > < td > < button @ click = "handleRemove" >移除</ button > </ td > </ tr > </ tbody > </ table > < div >总价 : ¥{{totalPrice}}</ div > </ template > < div v-else>购物车为空</ div > </ div > </ body > <!-- 通过cdn引入--> < script src = "index.js" ></ script > </ html > |
index.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
const app = new Vue({ el : '#app' , data : { allCheck: false , list : [ { id: 1 , name : 'iPhone 8 ' , price: 6188 , count: 1 , isChecked : false }, { id: 2 , name : '小米 8 ' , price: 5888 , count: 1 , isChecked : false }, { id: 3 , name : 'iPad Pro ' , price: 11000 , count: 1 , isChecked : false }, { id: 4 , name : '雷神SE9' , price: 6188 , count: 10 , isChecked : false }, ] }, computed : { //通过计算属性获取总价格 totalPrice: function () { let total = 0; const newArr = this .list.filter(value => { return value.isChecked == true }) for ( var i = 0 ;i<newArr.length;i++) { total += this .list[i].price * this .list[i].count } //返回一个符合千分位格式的金额数 //return total.toString().replace(/\B(?=(\d{3})+$)/g,',') return total } }, methods : { //减法 handleReduce: function (index) { if ( this .list[index].count === 1) return ; this .list[index].count--; }, //加法 handleAdd: function (index) { this .list[index].count++ }, //移除 handleRemove: function (index) { this .list.splice(index,1) }, //全选 checkAll() { this .allCheck = ! this .allCheck this .list.forEach(value => { value.isChecked = this .allCheck }) }, //单选,当全部选中时,改变全选按钮的状态 singleCheck(index) { this .list[index].isChecked = ! this .list[index].isChecked const selectData = this .list.filter(value => { return value.isChecked == true }) this .allCheck = selectData.length === this .list.length ? true : false } } }) |
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
[v-cloak] { display : none ; } table { border : 1px solid #e9e9e9 ; border-collapse : collapse ; border-spacing : 0 ; empty-cells : show ; } th,td { padding : 8px 16px ; border : 1px solid #e9e9e9 ; text-align : left ; } th { background : yellowgreen; color : #5c6b77 ; font-weight : 600 ; white-space : nowrap ; } |
效果图如下