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 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
Javascript实现信息滚动效果
May 18 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
vue路由跳转传参数的方法
May 06 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
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
Linux中为php配置伪静态
2014/12/17 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
jQuery实现简单弹幕效果
2019/11/28 jQuery
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python使用Matplotlib画饼图
2018/09/25 Python
详解python pandas 分组统计的方法
2019/07/30 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
奉献演讲稿范文
2014/05/21 职场文书
啤酒节策划方案
2014/05/28 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python