这篇文章给大家介绍利用Vue怎么实现一个购物车功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
具体方法如下：
<!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> <h3>总价为 {{totalPrice | dealPrice}}</h3> </div> <h3 v-else>购物车为空</h3> </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>
关于利用Vue怎么实现一个购物车功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
