Vue2-计算属性、侦听器和过滤器

1、计算属性

现在希望页面可以动态的计算总价

img

定义一个computed计算属性，所有需要计算的都可以写在里面

写一个计算总价的方法totalPrice，只要他所依赖的值有任何一个发生变化都会触发，重新计算

img

2、侦听器

现在我们需要这么一个场景：

西游记的库存只有3件，需要实时监听到数量的变化，点击的时候超过3件了就提示库存已经超了

就可以通过侦听器watch来实现，watch可以来监控某一个属性

newVal（新值），oldVal（旧值）img

现在让他超过3的时候就给个提示

在这里插入图片描述

3、过滤器

在这里插入图片描述

三元运算在复杂场景下有点不好用，我们就可以利用过滤器来过滤：

在过滤器filters：{}中写一个方法，可以将要过滤的值val传进来

val最终展现成什么样，就在里面写逻辑：

| ：管道符

在这里插入图片描述

现在写的过滤器是在当前vue实例里面的，称为局部过滤器，只能在当前实例能用

全局过滤器

在这里插入图片描述

posted @ 2022-06-27 15:36  yuanyee  阅读(13)  评论(0)    收藏  举报