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 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
JavaScript函数详解
Feb 27 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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中文件上传的安全问题
2006/10/09 PHP
建立文件交换功能的脚本(二)
2006/10/09 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php备份数据库类分享
2015/04/14 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
理解JS绑定事件
2016/01/19 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
python中join()方法介绍
2018/10/11 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
python属于解释型语言么
2020/06/15 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
股权转让协议书范本
2014/04/12 职场文书
培训讲师岗位职责
2014/04/13 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
关键在于落实心得体会
2014/09/03 职场文书
明确岗位职责
2015/02/14 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
基于Python实现西西成语接龙小助手
2022/08/05 Golang