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 的异常处理机制
Nov 30 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
js css自定义分页效果
2017/02/24 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
flask项目集成swagger的方法
2020/12/09 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
JPA的特点
2014/10/25 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
会计岗位说明书
2014/07/29 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2014年政教处工作总结
2014/12/20 职场文书
沈阳故宫导游词
2015/01/31 职场文书
聘任书格式及范文
2015/09/21 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书