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 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php并发加锁示例
2016/10/17 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
python的keyword模块用法实例分析
2015/06/30 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python实现udp聊天窗口
2020/03/31 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
汉语言文学专业自荐信
2014/06/11 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
学生会主席任命书
2015/09/21 职场文书