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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
各种快递查询--Api接口
2016/04/26 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Angular工具方法学习
2016/12/26 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
python实现机器人卡牌
2019/10/06 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python中的__init__作用是什么
2020/06/09 Python
Python实现EM算法实例代码
2020/10/04 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
小学英语教师先进事迹
2014/05/28 职场文书
继承公证书格式
2015/01/26 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python