vue 过滤器的使用详解

        过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据    

        过滤器,其实不是必须要用的东西,它只是vue给我们提供的新的数据处理方式,过滤器能做到的,用计算属性,methods方法,依然可以实现。


案例1:(过滤器简单使用)



vue 过滤器的使用详解_第1张图片

        上图中 A为参数(要被处理的数据)B为过滤器,中间通过管道符(‘ | ’)连接 ,管道符两边有空格分离(‘我觉得就是一个规范,因为去掉两边的空格,依然可以运行’)。

过滤器其实也是按照函数来写的,过滤器写在filters下,与data ,methods等同一级。如图B就是过滤器,定义在filters内,图中A作为参数传递给B,然后B return出一个结果,将整个C替换掉。注意,strChange中的value为参数A 并不是从data中直接拿到的。

效果1: 

vue 过滤器的使用详解_第2张图片


案例2:(过滤器带参数)


                '加油 China !' 为参数,但是在过滤器中,第一个参数永远是管道符前边的这个参数(‘要被处理的数据’)

效果2:

vue 过滤器的使用详解_第3张图片

 案例3:(串联)


vue 过滤器的使用详解_第4张图片

        过滤器串联是按顺序来进行编译的,A作为参数给filterA,return出结果替换掉BB作为参数给filterB,return出结果替换掉C

效果3:

案例4:(局部/全局过滤器) 

1.新建filter文件夹,添加filter.js文件:

vue 过滤器的使用详解_第5张图片

2.添加到Vue全局中,在main.js中引入,并且添加:

vue 过滤器的使用详解_第6张图片

3.在组件中就可以直接使用了:



        过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 

 效果4:

  

 案例5:(简单应用)

        通过一个 Day.js 这个轻量的处理时间和日期的 JavaScript 库,来快速掌握过滤器的使用。

                        https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.jshttps://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js       

        我是要在 Node.js 项目中使用 Day.js,使用 NPM 安装:

        npm install dayjs

然后在项目代码中引入即可:

var dayjs = require('dayjs')

//import dayjs from 'dayjs' // ES 2015

dayjs().format()


str参数这种写法是es6中的写法 ,即没有传这个参数时,默认是等号后边规定的值,有参数,就按照所传参数的值来操作。

效果5:

vue 过滤器的使用详解_第7张图片

你可能感兴趣的:(vue.js,vue.js,javascript)