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用mixin合并重复代码的实现
Nov 27 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue实现锚点定位功能
Jun 29 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
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
jQuery操作cookie
2016/08/08 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python实现简单的代理服务器
2015/07/25 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python 负数取模运算实例
2020/06/03 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
实习单位接收函
2014/01/11 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
阿甘正传观后感
2015/06/01 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书