Vue实现小购物车功能


Posted in Vue.js onDecember 21, 2020

本文实例为大家分享了Vue实现小购物车功能的具体代码,供大家参考,具体内容如下

本人还在初级学习阶段,有很多不足之处,希望能指出错误,一起进步

HTML代码块

<body>
 <div id="app">
 <div v-if="books.length">
 <table>
  <thead>
  <tr>
   <th></th>
   <th>书籍名称</th>
   <th>出版日期</th>
   <th>价格</th>
   <th>购买数量</th>
   <th>操作</th>
  </tr>
  </thead>

  <tbody>
  <tr v-for="(itme,index) in books">
   <td>{{itme.id}}</td>
   <td>{{itme.name}}</td>
   <td>{{itme.date}}</td>
   <!-- showPrice过滤器 -->
   <td>{{itme.price | showPrice}}</td>
   <td>
   <!-- 动态绑定disabled,当数量小于1时 禁止点击按钮-->
   <button @click="decrement(index)" :disabled="itme.count <= 1">-</button>
   {{itme.count}}
   <button @click="increment(index)">+</button>
   </td>
   <td><button @click="Handle(index)">移除</button></td>
  </tr>
  </tbody>
 </table>
 <h2>总价格:{{totalPrice | showPrice}}</h2>
 </div>
 <h2 v-else>购物车为空</h2>
 </div>
</body>

css代码块

table{
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 border-spacing: 0;
}
th,td{
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}
th{
 background: #f7f7f7;
 color: #5c6b77;
 font-weight: 600;
}

Vue.js代码块

const app = new Vue({
 el:'#app',
 data:{
 books:[
  { 
  
  id:1,
  name:'《算法议论》',
  date:'2001-1',
  price:85.00,
  count:1
 },
 { 
  id:2,
  name:'《编程珠玑》',
  date:'2002-1',
  price:65.00,
  count:1
 },
 { 
  id:3,
  name:'《Unix编程艺术》',
  date:'2000-1',
  price:59.00,
  count:1
 },
 { 
  id:4,
  name:'《代码大全》',
  date:'2005-1',
  price:135.00,
  count:1
 },
 ]
 },

 /**
 * 使用普通方法
 */
 methods:{
 //获取小数点的方法
 // getFinalPrice(price){
 // return '¥' + price.toFixed(2);
 // }

 //点击事件
 increment(index){
  this.books[index].count++;
 },
 decrement(index){
  this.books[index].count--;
 },
 Handle(index){
  this.books.splice(index,1);
 }
 },
 computed:{
 totalPrice(){
  let totalPrice = 0;
  for(let i = 0; i < this.books.length; i++){
  totalPrice += this.books[i].price * this.books[i].count;
  }
  return totalPrice;
 }
 },
 /**
 * 使用过滤器获取小数点
 */
 filters:{
 showPrice(price){
  return '¥' + price.toFixed(2);
 }
 }
})

效果如图:

Vue实现小购物车功能

还有很多不足之处,希望大家能指出。

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
简单实现PHP留言板功能
2016/12/21 PHP
如何离线执行php任务
2017/02/21 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python 实现控制鼠标键盘
2020/11/27 Python
pip install命令安装扩展库整理
2021/03/02 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
英语自我评价范文
2014/01/24 职场文书
单身联谊活动方案
2014/01/29 职场文书
实验教师岗位职责
2014/02/13 职场文书
房地产广告词大全
2014/03/19 职场文书
春节超市活动方案
2014/08/14 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书