后端程序员学习前端篇（二）

vue实现简单购物车

首先上效果

主要实现了删除，全选，全部取消

技术点 对计算属性和侦听器的掌握及@change和watch的区别

上代码：

html部分：

<div id="app">
    <div class="center">购物车</div>
    <div v-for="item in list" class="item" >
      <input type="checkbox" v-model="item.check" @change='gaibian(index)'>
      <div>{{item.name}}</div>
      <div>{{item.price}}</div>
      <div class="ctrl">
        <button @click='item.num++'>+</button>
        <input type="text" v-model="item.num">
        <button  @click='item.num--'>-</button>
      </div>
      <button @click='del(index)'>删除</button>
    </div>
    <div class="total">
      <input type="checkbox" v-model="selectall" @change='all()'>
      <div>总价 ￥：{{zongjia}}</div>
    </div>
  </div>

javascript部分：

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
  <script type="text/javascript">

    var vm = new Vue({
      el: '#app',
      
      data: {
        hang:0,
        selectall:false,
        list:[{
          id:1,
          name:'iphone6',
          price:1000,
          num:1,
          check:false,
        },{
          id:2,
          name:'iphone7',
          price:2000,
          num:2,
          check:true,
        },{
          id:3,
          name:'iphoneX',
          price:4000,
          num:1,
          check:false,
        }]
      },
      computed: {//计算属性

        zongjia(){
          let sum=0;//总计
          for(let i=0; i<this.list.length;i++){
            if(this.list[i].check){//如果勾中
              sum+=parseFloat(this.list[i].price*this.list[i].num)
            }
            
          }
          return sum;
        }
      },
      
      methods: {
        del(index){
				// 删一个数组元素
        this.list.splice(index,1);
      },
    /*   selectall(){
        let bianliang=true;
          for(let i=0; i<this.list.length;i++){
            this.list[i].check=bianliang;           
         
        } */
        gaibian(index){
          let all=true;
          for(let i=0;i<this.list.length;i++){
            if(!this.list[i].check){
              all=false;
            }
              
          }
          this.selectall=all;
        },
        all(){
          for(let i=0;i<this.list.length;i++){
            this.list[i].check=this.selectall;
          }
        }
      },
      /* watch:{//侦听器  不能用侦听，只要改变就会改变其他
        selectall(newval){
          for(let i=0; i<this.list.length;i++){
            this.list[i].check=newval;           
         
        }
        }
         
      }
      , */
    });
  </script>

心得思路：

①v-for循环列表，v-model双向绑定
②computed:
一旦这个计算属性里面用到的data数据发生变化，就会重新执行这个计算属性函数得到一个新的值，计算属性必须有返回值。
加减数量变化都会改变总数
③全选/全部取消 为什么不用watch侦听？
因为只全选框的true和false都会影响其他的复选框的true和false，而本来全选如果其中一个复选框勾选取消，就会触发全部取消的侦听事件从而出现bug，都取消了。