vue编写简单的购物车功能


Posted in Vue.js onJanuary 08, 2021

使用vue写出简单的购物车,供大家参考,具体内容如下

vue编写简单的购物车功能

代码:

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .cl{
   border: 1px solid black;
   width: 300px;
   margin: 30px;
   padding: 15px;
  }
 </style>
</head>
<body>
 <div id="app">
  <div class="cl" v-for="(item,index) in items">
   <h4>{{item.sname}}</h4>
   <button @click="item.sum==0?item.sum==0:item.sum--">-</button>
   <span>{{item.sum}}</span>
   <button @click="item.sum++">+</button>
   <span>{{item.sprice}}元/斤</span>
  </div>

  <table>
   <tr>
    <th>选择</th>
    <th>商品名</th>
    <th>商品数量</th>
    <th>商品价格</th>
   </tr>
   <tr v-for="(item,index) in items">
    <td><input type="checkbox" :checked="item.isSelect" @click="item.isSelect=!item.isSelect"></td>
    <td>{{item.sname}}</td>
    <td>{{item.sum}}</td>
    <td>{{item.sprice*item.sum}}</td>
   </tr>
   <tr>
    <td><input type="checkbox" @click="selectProduct(isSelectAll)" :checked="isSelectAll">全选</tf>
    <td>合计</tf>
    <td>{{total.totalNum}}</tf>
    <td>{{total.totalPrice}}</tf>
   </tr>
  </table>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  new Vue({
   el:'#app',
   data:{
    items:[
     {
      'sname':'苹果',
      'sum':1,
      'sprice':'10',
     },
     {
      'sname':'香蕉',
      'sum':1,
      'sprice':'12',
     },
     {
      'sname':'橘子',
      'sum':1,
      'sprice':'8',
     },
    ]
   },
   methods:{
    selectProduct:function(_isSelect){
     for(var i=0 ,len=this.items.length;i<len;i++){
      this.items[i].isSelect=!_isSelect;
     }
    },
    
   },
   computed:{
    isSelectAll:function(){
     return this.items.every(function(val){return val.isSelect})
    },
     total:function(){
     var prolist = this.items.filter(function(val){return val.isSelect});
     totalpri = 0;
     totalnum = 0;
     for (var i = 0;i<prolist.length;i++){
      totalpri+=prolist[i].sprice*prolist[i].sum;
      totalnum+=prolist[i].sum
     }
     
     return{totalNum:totalnum,totalPrice:totalpri}
    }
   },
   mounted:function(){
    var _this=this;
    this.items.map(function(item){
     _this.$set(item,'isSelect',false)
    })
   }
  })
 </script>
</body>
</html>

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

Vue.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
处理单名多值表单的详解
2013/06/08 PHP
常用js脚本
2006/12/03 Javascript
javascript 函数式编程
2007/08/16 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python 字符串常用方法汇总详解
2019/09/16 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
国旗下的讲话演讲稿
2014/05/08 职场文书
公共场所禁烟标语
2014/06/25 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
典型事迹材料范文
2014/12/29 职场文书
七年级语文教学反思
2016/03/03 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书