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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
js onclick事件传参讲解
Nov 06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP实现简单日历类编写
2020/08/28 PHP
asp 的 分词实现代码
2007/05/24 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
pycharm的console输入实现换行的方法
2019/01/16 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python清空命令行方式
2020/01/13 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
实习教师自我鉴定
2013/12/12 职场文书
商场促销活动方案
2014/02/08 职场文书
广告设计应届生求职信
2014/03/01 职场文书
幼师求职信
2014/06/23 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
青年文明号汇报材料
2014/12/23 职场文书
毕业实习计划书
2015/01/16 职场文书
收入证明怎么写
2015/06/12 职场文书
2016继续教育研修日志
2015/11/13 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电