服务器之家

服务器之家 > 正文

Vue实现简单购物车功能

时间:2021-12-10 16:10     来源/作者:xiaoShengSanYue

本文实例为大家分享了Vue实现简单购物车功能的具体代码,供大家参考,具体内容如下

话不多少,上效果图

Vue实现简单购物车功能

代码如下:

?
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
 <div id="app">
 <div v-if="books.length">
  <table class="table table-dark">
  <thead>
   <tr>
   <th scope="col">ID</th>
   <th scope="col">书籍名称</th>
   <th scope="col">出版日期</th>
   <th scope="col">书籍价格</th>
   <th scope="col">购买数量</th>
   <th scope="col">操作</th>
   </tr>
  </thead>
  <tbody>
   <tr v-for="(item,index) in books">
   <th scope="row">{{item.id}}</th>
   <td>{{item.name}}</td>
   <td>{{item.date}}</td>
   <td>{{item.price | dealPrice}}</td>
   <td>
    <button class="btn btn-primary" @click="decrement(index)" :disabled="item.count <= 0">-</button>
    {{item.count}}
    <button class="btn btn-primary" @click="increment(index)">+</button>
   </td>
   <td>
    <button class="btn btn-danger" @click="removeBook(index)">移除</button>
   </td>
   </tr>
  </tbody>
  </table>
  <h2>总价为 {{totalPrice | dealPrice}}</h2>
 </div>
 <h2 v-else>购物车为空</h2>
 </div>
 <script src="vue.js"></script>
 <script>
 const app = new Vue({
  el:'#app',
  data:{
  books:[
   {
   id:1,
   name:'PHP手册',
   date:'2020年5月17号',
   price:33,
   count:1
   },
   {
   id:2,
   name:'Python手册',
   date:'2020年5月17号',
   price:33,
   count:1
   },
   {
   id:3,
   name:'Linux手册',
   date:'2020年5月17号',
   price:33,
   count:1
   },
  ],
  },
  computed:{
  totalPrice(){
   let price = 0;
   for (let i = 0;i<this.books.length;i++) {
   price += this.books[i].price * this.books[i].count
   }
   return price;
  }
  },
  methods:{
  increment(index){
   this.books[index].count ++
  },
  decrement(index) {
   this.books[index].count --
  },
  removeBook(index) {
   this.books.splice(index,1)
  }
  },
  filters: {
  dealPrice(price){
   return '$' + price.toFixed(2)
  }
  }
 })
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/yehuaner33/article/details/106170726

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部