Vue实现商城购物清单（更新~）

今天分享一个我平时写的Vue实现购物车清单的小demo
此版在原来的基础上做了一些改变和拓展。☞旨在加强vue基础的巩固练习
html

<div id="my" >
  <div class="panel panel-info" style="margin:20px;">
    
    <div class="panel-heading">
      <h1 style="display: inline-block;">我的购物清单列表h1>
      <span>清单总数
        <span class="label label-warning" >{{lists.length}}span>span>
            <span>已采购数
              <span class="label label-primary"  >{{buyNum}}span>
            span>
    div>
    
    <div class="panel-body">
      <div class="input-group">
        <input class="form-control" type="text" v-model="msg" @keydown.enter="add()" placeholder="请输入要添加的商品"/>
        <span class="input-group-btn">
                添加button>

              span>
      div>
      <table class="table table-striped">
        <thead>
        <tr>

          <th>清单名称th>
          <th>数量th>
          <th>价格th>
          <th>状态th>
          <th>采购th>
          <th>操作th>
        tr>
        thead>
        <tbody>
        

          <td>{{v.name}}td>
          <td>
            <button class="btn btn-primary btn-sm" @change="buyOne()"  @click="numDown(index)" :disabled="v.state || v.num == 1">-button>
            <input type="text" :name="v.name" v-model="v.num" @keydown.enter="numKeydown(index)" style="text-align: center;width:80px !important;" >
            <button class="btn btn-primary btn-sm" @change="buyOne()" @click="numUp(index)" :disabled="v.state">+button>

          td>

          <td>￥{{v.sum}}td>
          <td>{{v.state | stateFilter}}td>
          <td><input type="checkbox" name="" v-model="v.state"  @change="buyOne()">td>
          <td><button type="button" class="btn btn-danger btn-sm" :disabled="!v.state" @click="delOne(index)">删除button>td>

        tr>
        tbody>
        <tfoot>
        <tr>
          <td>td>
          <td>数量：{{buyNum}}件td>
          <td>合计：￥{{buyRmb}}td>
          <td>td>
          <td><input type="checkbox" name="" :disabled="lists.length == 0" v-model="checkAll" @change="buyAll()">全选td>
          <td>
            <button class="btn btn-warning btn-xs"  @click="submit()" :disabled="buyNum == 0">结算button>
            <button type="button" class="btn btn-danger  btn-xs" @click="delAll()" :disabled="!checkAll">删除button>
          td>
        tr>
        tfoot>
      table>
    div>
  div>

div>

JS

window.onload= function(){
  var vm = new Vue({
    el:'#my',
    data:{
      msg:'',
      checkAll:false,
      buyNum:0,
      buyRmb:0,
      lists:[
        {name:'化妆品',state:false,rmb:20,sum:20,num:1},
        {name:'包包',state:false,rmb:35,sum:35,num:1},
        {name:'手机',state:false,rmb:10,sum:10,num:1},
        {name:'衣服',state:false,rmb:30,sum:30,num:1}
      ],
      editText:{val:'编辑',state:false},
    },
    mounted:function(){
      this.buyOne();
    },
    methods:{
      //添加商品
      add:function(){
        if (this.msg==""){
          alert("输入错误！请重新输入。");
          return;
        }
        let rmb = Math.floor(Math.random()*10 + 35);
        this.lists.unshift({name:this.msg,state:false,rmb:rmb,sum:rmb,num:1});
        this.msg ='';
        if (this.checkAll == true){
          this.buyAll();
        }


      },
      //添加数量
      numUp:function(index){
        this.lists[index].num++;
        this.lists[index].sum = this.lists[index].rmb*this.lists[index].num;
      },
      //减少数量
      numDown:function(index){
        if (this.lists[index].num == 1){
          return;
        }
        this.lists[index].num--;
        this.lists[index].sum = this.lists[index].rmb*this.lists[index].num;

      },
      //输入数量总价计算
      numKeydown:function(index){
        this.lists[index].sum = this.lists[index].rmb*this.lists[index].num;
      },
      //购买全部
      buyAll:function(){
        if(this.checkAll == true){
          this.buyRmb =0;
          this.buyNum =0;
          this.lists.forEach((item)=>{
            item.state = this.checkAll;
            this.buyRmb += item.sum;
            this.buyNum += item.num;
          })
        }else{
          this.buyRmb =0;
          this.buyNum =0;
          this.lists.forEach((item)=>{
            item.state = this.checkAll;
          })
        }

      },
      //采购单个商品
      buyOne:function () {
        if(this.lists.length > 0) {
          //状态为true的数组
         let curTrue = this.lists.filter(item => {
            return item.state == true;//返回lists中状态为true的数组
          });
          curTrue.length == this.lists.length ? this.checkAll = true : this.checkAll = false;//三目运算符更简洁
          this.buyRmb = 0;
          this.buyNum = 0;
          curTrue.forEach((item) => {
            this.buyRmb += item.sum;
            this.buyNum += item.num;
          })
        }else{
          this.buyAll();
          this.checkAll = false;
        }
      },

      //删除单条数据
      delOne:function (index) {
        this.lists.splice(index,1);
        this.buyOne()
      },
      //清空购物清单
      delAll:function () {
        this.lists = [];
        this.checkAll = false;
        this.buyNum = 0;
        this.buyRmb = 0;

      },
     //结算
      submit:function () {
        alert("确认提交吗？")
      }
    },

    filters:{   //过滤器    文本格式    管道
      stateFilter:function(type){   //list.state
        switch(type){//在我们写业务代码时，如果判断条件过多可用switch替换if...else
          case false:
            return '未采购';
          case true:
            return '已采购';
          default :
            return '未采购';
        }
      }
    }

  })
}

如果有跟我一样正在学习vue的小伙伴，需要源码的可扫描下方二维码关注微信公众号，后台回复vue-BuyCar获取~