基于Vue Computed Watch Filter知识点小案例：购物车

计算属性Computed

• 计算属性：相当于可以完成代码计算的变量。（自动更新，并返回计算结果）

• 编写步骤：

  • 步骤1：声明计算属性：（编写逻辑代码），在computed中声明

  computed: {
    //属性名() { return 返回值 }
    total() {
      return 0
    }
  },

步骤2：使用计算属性：与普通变量相同的

{{total}}

案例：将字符串反转（倒排），“ABC” --> "CBA"

案例2：data、methods、computed对比，‘显示姓名，2个文本框，一个是姓，一个是名’

过滤器

• 过滤器：是对已有数据的二次加工

语法

语法1：无参

• 声明过滤器 (data/methods平级)

filter: {   
  过滤器名称(已有数据) {        
  return 处理结果    
}}

• 使用过滤器        

{{变量 | 过滤器}}

语法2：有参

• 声明过滤器 (data/methods平级)

filter: {
    过滤器名称(已有数据, 变量1,变量2,... ) {
        return 处理结果
    }
}

使用过滤器

{{变量 | 过滤器(参数1,参数2,...) }}

案例

案例1：固定2位小数位数

案例2：指定小数位数

监听器

• 监听器：当数据发生改变时，监听器可以出发对应的事件。

语法

语法1：对普通变量进行监听

data() {
	return {
		变量：1
	}
},
watch: {
    变量() {		//data.变量的监听处理函数
        
    }
}

语法2：深度监听

data() {
	return {
		对象变量：{
        	属性1: 值,
            属性2: 值,
    	}
	}
},
watch: {
    对象变量: {
        handler() {},   //处理函数
        deep: true		//深度监听，属性值发生变化时，也可以监听
    }
}

案例

• 监听普通变量和对象变量

案例：购物车

需求

实现

• 步骤：

  • 步骤1：页面显示（Cart.vue、路由、路径 /cart）

  • 步骤2：展示数据（模拟商品list、v-for展示）、（复选框、价格、时间、总价）

案例：计算总计

  computed: {
    //属性名() { return 返回值 }
    total() {
      let sum = 0 ;
      this.productList.forEach(product => {
        // 小计的和
        sum += (product.price * product.count)
      });
      return sum
    }
  },