前端学习05-Vue-计算属性和侦听器

目录

计算属性 

侦听器

过滤器

局部过滤器

全局过滤器


计算属性 

根据价格和数量,自动计算出总价

出现精度问题,暂时不管,项目中用到了再统一解决

前端学习05-Vue-计算属性和侦听器

前端学习05-Vue-计算属性和侦听器

侦听器

监听器,比如我们西游记的库存只有3件,实时监听库存,超过3件,我们就提示超3件了

前端学习05-Vue-计算属性和侦听器

前端学习05-Vue-计算属性和侦听器

西游记数量超过3,再加的话,就会出现:超出库存限制

前端学习05-Vue-计算属性和侦听器

当数量变成2的时候,提示“超过库存限制”,没有消失,再修改一下代码

前端学习05-Vue-计算属性和侦听器

修改代码,当库存等于3的时候,就提示出超出库存限制的提示信息

前端学习05-Vue-计算属性和侦听器

再保存,看页面就可以了

过滤器

遍历对象

前端学习05-Vue-计算属性和侦听器

效果 

前端学习05-Vue-计算属性和侦听器

现在性别1代表男,0代表女

前端学习05-Vue-计算属性和侦听器

前端学习05-Vue-计算属性和侦听器

局部过滤器

使用过滤器

{{user.gender | genderFilter}}:将user.gender的值传递给genderFilter

前端学习05-Vue-计算属性和侦听器

前端学习05-Vue-计算属性和侦听器

全局过滤器

前端学习05-Vue-计算属性和侦听器

前端学习05-Vue-计算属性和侦听器