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+iview实现文件上传
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 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
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
zend framework重定向方法小结
2016/05/28 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP递归算法的简单实例
2019/02/28 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js原型链原理看图说明
2012/07/07 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python中的推导式使用详解
2015/06/03 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
python交互式图形编程实例(二)
2017/11/17 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python suds访问webservice服务实现
2020/06/26 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
高一学生期末评语
2014/04/25 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
管理工程专业求职信
2014/08/10 职场文书
经销商会议开幕词
2016/03/04 职场文书
python随机打印成绩排名表
2021/06/23 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python