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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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 URL编码解码函数代码
2009/03/10 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
客房主管岗位职责
2013/12/09 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
学校与家长安全责任书
2014/07/23 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python