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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
jquery构造器的实现代码小结
May 16 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
js DOM的事件常见操作实例详解
Dec 16 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 程式大小
2006/12/06 PHP
安装APACHE
2007/01/15 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
javascript学习网址备忘
2007/05/29 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript中的new使用
2010/03/20 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
js中document.write的那点事
2014/12/12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
幼儿园春游活动方案
2014/01/19 职场文书
医药销售求职信范文
2014/02/01 职场文书
中介业务员岗位职责
2014/04/09 职场文书
开票证明
2015/06/23 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
Golang map映射的用法
2022/04/22 Golang
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript