Vue实现简单购物车功能


Posted in Vue.js onDecember 13, 2020

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

话不多少,上效果图

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>
  <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
You might like
Cakephp 执行主要流程
2010/03/24 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python队列Queue的详解
2019/05/10 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
超市创业计划书
2014/04/24 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
英文商务邀请函范文
2015/01/31 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书