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编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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 学习资料零碎东西
2010/12/04 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
php swoft框架实例用法
2020/12/22 PHP
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
介绍Python中的文档测试模块
2015/04/28 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
个人授权委托书
2014/09/15 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
小学家长通知书评语
2014/12/31 职场文书
投资申请报告
2015/05/19 职场文书