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>

到此这篇关于vue如何实现购物车选择功能就介绍到这了。意志坚强的人,他的世界充满着无限的可能性。更多相关vue如何实现购物车选择功能内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
vue如何实现购物车小案例

vue 如何实现购物车总价计算

Vue+Node如何实现商品列表的分页、排序、筛选,添加购物车功能详解

如何使用vuex较为优雅的如何实现一个购物车功能的示例代码

Vue.javascript框架如何实现购物车功能