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新手入门指导教程
Nov 18 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python中操作符重载用法分析
2016/04/29 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python函数与方法的区别总结
2019/06/23 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python 实现屏幕录制示例
2019/12/23 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
测控技术与仪器个人求职信范文
2013/12/30 职场文书
九年级科学教学反思
2014/01/29 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
操行评语大全
2014/04/30 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2015年招生工作总结
2015/05/04 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS