菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 20230207-vue-day02 [打印本页]

作者: 博5237 时间: 2023-2-11 15:00
标题: 20230207-vue-day02

1.全局过滤器

Vue.filter("过滤器名称", 过滤器处理函数)

写在 vue实例之前

2.局部过滤器

filters: {'formartStr': function (value) {}

}

写在xue实例中

一定要有return值

3.使用

花括号差值：{{msg| 过滤器名称}}

v-bind表达式：:value="msg | 过滤器名称"

4.PS：

过滤器不改变真正的 data ，而只是改变渲染的结果

局部优先级高于全局过滤器

过滤器对时间进行格式化

5.Dayjs处理时间

6.计算属性：computed

computed：双向绑定

位置和data同级

computed和methods区别

computed：是属性，有缓存机制，只调用一次，双向绑定

methods：是方法，多次调用

7、监听器：watch

和data同级

watch：{函数名(新值,旧值){}}

监听的数据作为函数名

用v-model=‘函数名’双向绑定

8.计算属性和监听器的区别

computed：支持缓存，只有依赖数据发生改变,才会重新进行计算

watch：不支持缓存，数据变,直接会触发相应的操作。

数据经常变化用watch，不经常变化用computed。

9.使用场景

watch擅长处理的场景：一个数据影响多个数据

computed擅长处理的场景：一个数据受多个数据影响

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)