vue项目中常用的

Posted 2020-09-05 懒人猫

通过操作对象的变量或者模型（data里面的数据可以称为模型），改变dom，而不是直接操作dom，间接达到vue和js的分离。

1.价格的增减功能，通过点击，数量实现改变

用到v-model双向绑定，

 

  //part指的是循环遍历里面的part,part in res
<span @click="changeMoney(part,-1)">-</span>  <!--//根据-1和+1判断用户是点击加还是法,记住此处的part和下面要绑定数据的input里面的part一样的-->
              <input type="text" v-model="part.productNumber">
              <span @click="changeMoney(part,+1)">+</span>

//加减数量,通过传入的参数判断数量的加减，
      changeMoney:function(product,way){
        if(way>0){
          product.productNumber++;
        }else{
          product.productNumber--;
          if(product.productNumber<1){  //如果减到小于1的时候，让商品至少为1，才能购买
            product.productNumber=1
          }

        }
      }

2.购物车的单选按钮，选中商品功能，接口里面没有字段，是监听不到的，通过$set设置一个不存在的变量，放在data里面，

两种方法，1.全局注册 Vue.set(item,"checked",true);2.局部注册 this.$set(part,"checked",true);

 

如果一个变量不在data里面声明或者不在对象里面，用vue监控不到属性（一个对象里面的变量不存在，解决办法）

思路：先判断商品是否选中，然后取反

注意：绑定class，一定是数组或者对象，{‘key’:}，

<!--//记得class是个对象，判断class是否存在checked指的是要判断的class，后面是他的状态，part.checked中的part指的是在遍历中的索引的对象，与上面的遍历应该一致-->
<--如果json里面有字段，应该写成v-bind:class="{‘checked‘:part.checked}"，part指的是字段-->

<span class="checkbox fff"  v-bind:class="{‘checked‘:part.checked}"  @click="selectProduct(part)"></span>   //调用下面的方法，part.checked=true，即为checked:true

//选中商品的方法
      selectProduct:function(part){//part是遍历里的数组
        if(typeof part.checked==‘undefined‘){//1.通过typeof判断变量是否存在,json；里面没有字段checked是否选中，所以需要判断
//            Vue.set(item,"checked",true)//第一种全局注册,全局的set就是在data里面创建，用set创建checked属性放到part变量里面，值为true，此时，part.checked=true
          this.$set(part,"checked",true);//局部注册,带有$符号的为局部变量，不带$全局，例如过滤器,$.set可以在遍历part里面创建
        }else{
            part.checked=!part.checked; //取反
        }
      }

3.全选功能

思路：绑定class,通过判断class

都不存在的属性，如果是在item遍历的时候需要加，用$set加，如果是页面加属性，加在data里面，调用data的全局变量

@click里面可以放表达式，可以放一元表达式和三元表达式，例如：checkAllFlag==true?true:false,调用函数，不能放业务逻辑，不能写，例如var checkAllFlag=true

<!--就是将‘checked‘:true通过一个checkAll的属性变量来传递，最终目的是使checked=true--> 
<div class="checkbox-wrap left"><span class="checkbox all" :class="{‘checked‘:checkAllFlag}" @click="checkAllFlag=true"></span>
</div> 
<!-- //在data里面定义一个变量,click里面可以放表达式，可以放一元表达式和三元表达式，例如：checkAllFlag==true?true:false,调用函数，不能放业务逻辑，不能写，例如var checkAllFlag=true -->
 <div class="check-text"><span class="checked-all" @click="checkAll(true)">全选</span>

<span class="unchecked-all" @click="checkAll(false)">取消全选</span></div>

 data :function() {
      return {
        produceList:[],
        pro:‘‘,
        tit:‘this id ‘,
        checkAllFlag:false//一定要定义这个变量，否则不会监听
      }
    }

//全选
      checkAll:function(flag){//flag判断是全选还是取消取消
        this.checkAllFlag=flag;
        var _this=this;//作用域发生变化，
        //控制当前全选按钮是否选中取消选中把当前选中的取反
//        if(this.checkAllFlag){//如果选中的话，遍历商品列表
          this.produceList.forEach(function(part,index){
                    if(typeof part.checked==‘undefined‘){//判断变量是否存在,json；里面没有字段checked是否选中，所以需要判断
                      _this.$set(part,"checked",_this.checkAllFlag);//局部注册,带有$符号的为局部变量，不带$全局，例如过滤器
                    }else{
                      part.checked=_this.checkAllFlag; //取反
                    }
          })
//        }
      }