vue实现购物车列表


Posted in Javascript onJune 30, 2020

本文实例为大家分享了vue实现购物车列表的具体代码,供大家参考,具体内容如下

功能:

  • 删除
  • 单选 全选
  • 增加数量 减少数量
  • 计算总价 计算数量
  • 搜索

代码:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="./js/vue.js"></script>
 </head>
 <body>
 <div id="app">
   筛选:<input type="text" v-model="key">
 <table border="1" cellspacing="0" cellpadding="10">
 <tr>
  <th>
  <input type="checkbox" v-model="all" @change="checkAll()" >
  </th>
  <th>id</th>
  <th>书籍名称</th>
  <th>出版日期</th>
  <th>购买价格</th>
  <th>数量</th>
  <th>操作</th>
 </tr>
 <tr v-for="(item,index) in flist" :key="item.id">
  <td style="text-align: center;"><input type="checkbox" v-model="item.sel" ></td>
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.time}}</td>
  <td>{{item.price|prices}}</td>
  <td><button @click="item.num--" :disabled="item.num==1">-</button>{{item.num}}<button @click="item.num++">+</button></td>
  <td><button @click="delItem(item.id)">移除</button></td>
 </tr>
 <tr><td colspan="7">总价格:{{total.price|prices}} 选择数量:{{total.num}}</td></tr>
 </table>
 </div>
 <script>
 var vm = new Vue({
 el:"#app",
 data:{
     key:"",
  all:true,
  list:[
  {id:1,name:"小红书",time:"2018-8",price:188.99,num:1,sel:true},
  {id:2,name:"小烂熟",time:"2019-8",price:88.9,num:1,sel:true},
  {id:3,name:"小绿树",time:"2017-5",price:133.00,num:1,sel:true},
  {id:4,name:"发生的树",time:"2020-1",price:68.80,num:1,sel:true},
  {id:5,name:"奥古",time:"2015-4",price:555.50,num:1,sel:true },
  ]
 },
 methods:{
     delItem(item){
      var falg=window.confirm("确定要删除吗?");
      if(falg){
       this.list.splice(item-1,1)
      }
      
     },
     checkAll(){
      this.list.forEach(item=>item.sel=this.all)
     }
    },
    watch:{
     list:{
      handler:function(){
       this.all=this.list.every(item=>item.sel)
      },
      deep:true
     }
    },
    computed:{
     total:function(){
      var price=0;
      var num=0;
      this.list.forEach(item=>{
       if(item.sel){
        price+=item.num*item.price
        num+=item.num*1
       
       }
      })
      return ({price,num})
     },
     flist:function(){
      if(this.key===''){return this.list}
  return this.list.filter(item=>item.name.includes(this.key))
     }
    },
    filters:{
     prices:function(val,fix=2){
      val=val.toFixed(fix)
      val=""+val
      return "¥"+val
     }
    },

 
 })
 </script>
 </body>
</html>

vue实现购物车列表

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

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

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue实现简单图片上传
Jun 30 #Javascript
vue基于better-scroll仿京东分类列表
Jun 30 #Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 #Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 #Javascript
Postman动态获取返回值过程详解
Jun 30 #Javascript
JS简易计算器实例讲解
Jun 30 #Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 #Javascript
You might like
php中jpgraph类库的使用介绍
2013/08/08 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JavaScript 基本概念
2015/01/20 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
基于Python __dict__与dir()的区别详解
2017/10/30 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Django如何将URL映射到视图
2019/07/29 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
EJB的几种类型
2012/08/15 面试题
师说教学反思
2014/02/07 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
中国梦口号
2014/06/13 职场文书
中国梦团日活动总结
2014/07/07 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
门卫管理制度范本
2015/08/05 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
导游词之青岛崂山
2019/12/27 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python