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操作xml
Nov 04 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
详解Node 定时器
Feb 26 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 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 使用post,get的一种简洁方式
2010/04/25 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
基于python的字节编译详解
2017/09/20 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
C#软件工程师英语面试题
2015/06/07 面试题
自立自强的名人事例
2014/02/10 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年司法局工作总结
2014/12/11 职场文书
五好家庭申报材料
2014/12/20 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python