vue实现购物车选择功能


Posted in Javascript onJanuary 10, 2020

使用vue制作一个购物车功能,只是一个测试版本,注重的是功能实现,界面并没有做好,数据也是模拟数据等

vue实现购物车选择功能

不说那么多,直接上代码

<template>
 <div id="app">
 
 全选<input type="checkbox" v-model="checkall" @change="check_all()">
 <div v-for="(item,index) in mylist" :key="index">
  <span>{{item.oname}}</span><input type="checkbox" v-model="item.this_all" @change="check_list(index)">
  <p v-for="(goods,nindex) in item.newlist" :key="nindex">
  <input type="checkbox" v-model="goods.check_one" @change="click_input(index,nindex)">{{goods.newname}}--{{goods.price}}元
  </p>
  
 </div>
 <p>总价:{{allprice}}</p>
 <button @click="btn()">提交订单</button>
 
 </div>
</template>
 
<script>
export default {
 name: 'App',
 data(){
  return{
   mylist:[
    {oname:"第一个",this_all:true,newlist:[{newname:"篮球",check_one:true,price:600},{newname:"足球",check_one:true,price:200},{newname:"滑雪",check_one:true,price:150}]},
    {oname:"第二个",this_all:true,newlist:[{newname:"西瓜",check_one:true,price:35},{newname:"桃子",check_one:true,price:20}]},
    {oname:"第三个",this_all:true,newlist:[{newname:"英雄联盟",check_one:true,price:200}]},
 
   ],
   checkall:true,
   allprice:0,
   cpmylist:[]
  }
 },
 mounted:function(){
  this.money();
 },
 
 methods: {
 money:function(){
 var that = this;
 this.allprice=0;
 that.mylist.forEach(item1 =>{
  item1.newlist.forEach(item2 =>{
  if(item2.check_one==true){
   that.allprice+=item2.price;
  }
  })
 })
 
 },
 check_all:function(){
 var that = this;
 that.mylist.forEach(item1 => {
  item1.this_all=that.checkall
  item1.newlist.forEach(item2 => {
  item2.check_one=that.checkall
  })
 });
 that.money();
 },
 
 abc:function(){
 var that = this;
  var aaa = that.mylist.filter(item2 =>{
  return item2.this_all==true
 })
 aaa.length==that.mylist.length ? that.checkall = true : that.checkall = false
 that.money();
 },
 
 check_list:function(i){
 var that = this;
 that.mylist[i].newlist.forEach(item1 =>{
  item1.check_one=that.mylist[i].this_all
 })
 that.abc();
 
 },
 
 click_input:function(i,j){
 var that = this;
 var checklist = that.mylist[i].newlist.filter(item1 =>{
  return item1.check_one==true
 })
 
 checklist.length==that.mylist[i].newlist.length ? that.mylist[i].this_all = true : that.mylist[i].this_all = false
 that.abc();
 
 },
 
 btn:function(){
 var that = this; 
 
 
 that.cpmylist=JSON.parse(JSON.stringify(that.mylist));
 that.cpmylist.filter(item1 =>{
  item1.newlist = item1.newlist.filter(item2 =>{
  return item2.check_one==true
  })
 })
 that.cpmylist=that.cpmylist.filter(item3 =>{
  return item3.newlist.length!=0
 })
 
 if(that.cpmylist.length==0){
  alert("请选择商品哦!")
 }else{
 
  console.log("★★★您购买的商品是:");
  that.cpmylist.forEach(item4 =>{
  console.log("----------"+item4.oname+"店铺----------");
  item4.newlist.forEach(item5 =>{
   console.log("——>:"+item5.newname);
  })
  })
 }
 }
 },
 
}
</script>
 
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

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

Javascript 相关文章推荐
jquery 操作iframe的几种方法总结
Dec 13 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
node.js基础知识小结
Feb 26 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
webpack proxy 使用(代理的使用)
Jan 10 #Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 #Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 #Javascript
jQuery操作动画完整实例分析
Jan 10 #jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 #Javascript
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
You might like
php正则表达式(regar expression)
2011/09/10 PHP
php array的学习笔记
2012/05/16 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python类的动态修改的实例方法
2017/03/24 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
tensorflow如何批量读取图片
2019/08/29 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
给领导的致歉信范文
2014/01/13 职场文书
个人安全生产承诺书
2014/05/22 职场文书
幼儿教师求职信
2014/05/24 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
烈士陵园观后感
2015/06/08 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Python 中random 库的详细使用
2021/06/03 Python