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 组件注册
Nov 20 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
js实现交通灯效果
2017/01/13 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python流程控制 if else实现解析
2019/09/02 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
自我鉴定范文
2013/11/10 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
药店促销活动策划方案
2014/08/24 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Windows server 2016服务器基本设置
2022/08/14 Servers