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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
JavaScript函数详解
Nov 17 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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中extract()函数的定义和用法
2012/08/17 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
javascript Demo模态窗口
2009/12/06 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
化妆品促销方案
2014/02/24 职场文书
理财投资建议书
2014/03/12 职场文书
欢度春节标语
2014/07/01 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
学校工会工作总结2015
2015/05/19 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
开业庆典致辞
2015/08/01 职场文书
小学数学教学随笔
2015/08/14 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
以下牛机,你有几个
2022/04/05 无线电