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学习笔记(十)
Jan 17 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
React简单介绍
May 24 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php生成扇形比例图实例
2013/11/06 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
js中作用域的实例解析
2017/03/16 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python中的ceil()方法使用教程
2015/05/14 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
教师教学评估方案
2014/05/09 职场文书
司法助理专业自荐书
2014/06/13 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
学生评语集锦
2015/01/04 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python