vue的商品购物

PROMULGATOR

黄大雄

湖北省武汉市

← JQuery二级菜单

→ css定位图形改(原创)

相关代码

vue的商品购物

vue购物车金额结算

用vue制作购物车（原创）

jquery仿购物车

购物车一键全选、全不选

jquery实现购物车

Html

Css

Js



    
        
            
                {{i.name}}
                {{i.jia | yuan}}
                今天不打折
                今天{{i.zhe*10}}折
            
        
    
    
        
            选择
            项
            类型
            数量
            原价格
            是否打折
            打折后价格
            单价格
            操作
        
        
            
            {{index +1}}
            {{i.name}}
            {{i.num}}
            {{i.jia| yuan}}
            不打折
            {{i.zhe}}
            {{i.ji | yuan}}
            {{i.danjia | yuan}}
            
                
                
                
                
            
        
        
            全选
            删除
            总价
            {{xianjia | yuan}}
        
    
    
        购物车为空

  table {
	text-align:center
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance:none;
}
input[type="number"] {
	width:20px;
	text-align:center;
	-moz-appearance:textfield;
}
ul {
	list-style:none;
	width:960px;
	overflow:hidden
}
ul li {
	width:15%;
	float:left;
	background:#0daff0;
	color:white;
	text-align:center;
	margin-right:4%
}

function $dazhe(list, func) {
      var arr = [];
      for (var i in list) {
          arr.push(func(list[i]));
      }
      return arr;
  }
  var vm = new Vue({
      el: "#app",
      data: {
          wupin: [{
                  name: "白菜",
                  num: 1,
                  jia: 5,
                  zhe: 0.7
              },
              {
                  name: "西红柿",
                  num: 1,
                  jia: 3,
                  zhe: 0.7
              },
              {
                  name: "土豆",
                  num: 1,
                  jia: 2,
                  zhe: 1
              },
              {
                  name: "排骨",
                  num: 1,
                  jia: 15,
                  zhe: 0.8
              },
              {
                  name: "龙虾",
                  num: 1,
                  jia: 30,
                  zhe: .95
              }
          ],
          quanxuan: false,
          cai: [{
                  name: "白菜",
                  num: 3,
                  jia: 5,
                  zhe: 0.7,
                  check: false
              },
              {
                  name: "排骨",
                  num: 1,
                  jia: 15,
                  zhe: 0.8,
                  check: false
              }
          ]
      },
      filters: {
          yuan: function(yuan) {
              return yuan + "元"
          }
      },
      computed: {
          zhehou: function() {
              return $dazhe(this.cai, function(o) {
                  o.ji = (o.jia * o.zhe).toFixed(1);
                  return o
              })
          },
          danjia: function() {
              return $dazhe(this.zhehou, function(o) {
                  o.danjia = Number((o.num * o.ji).toFixed(1));
                  return o
              })
          },
          xianjia: function() {
              var num = 0;
              for (var i in this.danjia) {
                  num += this.danjia[i].danjia;
              }
              return num;
          }
      },
      methods: {
          addWuPing: function(o) {
              o.check = false;
              var list = this.cai;
              var has = false;
              for (var j in list) {
                  var name = list[j].name;
                  if (o.name == name) {
                      alert("你已添加该物品");
                      has = true;
                  }
              }
              if (!has) {
                  this.cai.push(o);
              }
              if (o.check == false) {
                  this.quanxuan = false
              }
          },
          quansan: function() {
              for (var i = this.cai.length - 1; i >= 0; i--) {
                  console.log(i);
                  var o = this.cai[i].check;
                  console.log(o);
                  if (o == true) {
                      this.cai.splice(i, 1);
                  }
              }
          },
          xuanzhes: function() {
              var xuanzhe = this.cai.filter(function(i) {
                  return i.check == true;
              });
              xuanzhe.length == this.cai.length ? this.quanxuan = true : this.quanxuan = false
          },
          quanxuans: function() {
              for (var i in this.cai) {
                  this.cai[i].check = this.quanxuan;
              }
          },
          jia: function(i) {
              this.zhehou[i].num++;
          },
          jian: function(i) {
              this.zhehou[i].num--;
          },
          yichu: function(i) {
              this.cai.splice(i, 1);
          }
      }
  })

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

vue的商品购物



代码描述：包含了增加，删除，全选，批量删除，计算，就是样式没做有点丑

请不要注意命名已经想不出来什么好的命名了

2

最新

发表评论全部评论

暂时没有评论！

天空下的田野0

2018/12/24 15:36:19

有bug总价没和复选框配合使用回复

caohoucheng0

2018/10/26 17:32:13

全选写的反了
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>vue的商品购物-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号