原来代码可以这样写之Vue的学习心得

1、


total后的值使用计算属性展示，点击选中之后，total只计算选中行的价格，因此，将computed钩子函数中的这一参数属性扩展为get和set，代码如下：

//html部分
<p v-bind:value="totalPrice">total:{{calcPrice}}</p>
//JavaScript部分
computed:{
	totalPrice:{
      get:function(){
        let price=0;
        for(let i=0;i<this.productList.length;i++){
          price+=this.productList[i].price*this.productList[i].count
        }
        this.calcPrice=price
        return price
      },
     set:function(newValue){
       this.calcPrice=newValue
     }
  }
}

点击选中之后，计算当前行的价格，对totalPrice赋值，此时即调用了set函数，但改变之后的值并不能在视图上显示，我添加了一个calcPrice用来表示点击选中操作的相关计算值，计算属性监听totalPrice并将所有改变反映给calcPrice。