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下载后台传过来的乱码流的问题
Dec 05 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue实现登录功能
Dec 31 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue深入理解插槽slot的使用
Aug 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php预定义常量
2006/12/25 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript中的this机制
2016/01/30 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python 转义字符详细介绍
2017/03/21 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python机器学习实现决策树
2019/11/11 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
南京大屠杀观后感
2015/06/02 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python