前端框架Vue学习06——过滤器的基本使用

过滤器：Vue.js允许自定义过滤器，可用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值（插值表达式）和v-bind表达式，过滤器应该被添加在js表达式的尾部，由管道符指示。
过滤器调用的时候的格式：
平时调用的时候直接将变量写在插值表达式中即可，如{ { name }}，如果希望对name输出之前做进一步的处理，可以在name后面通过管道符的形式，给其添加一个过滤器，如{ { name | nameope（过滤器的名称） }}。即表示将处理的结果在插值表达式中展示。
过滤器的定义语法：

//过滤器中的function 其第一个参数已经被规定死了，永远是 过滤器管道符前面传递过来的数据。
Vue.filter('过滤器的名称',function(date1,...){
})

全局过滤器

全局过滤器的过滤器函数可以接收多个参数function(msg,arg)，比如这里需要将“单纯”替换为“疯狂”，或者其它，只需要将需要改变的字段传过来即可。即通过过滤器传参。

data: {
          msg:'曾经，我也是一个单纯的少年，单纯的我，谁才是这个世界上最单纯的人'
     },

过滤器传递“疯狂”

        
{
    { msg | msgFormat('疯狂')  }}

这里过滤器后面的处理函数function接收第二个参数arg（第一参数是管道符前面的传过来的数据），即接收msgFormat中的“疯狂”。

//定义一个全局的 vue 过滤器 
        Vue.filter('msgFormat',function(msg,arg){
            //字符串的replace 第一个参数，除了可写一个字符串外，还可以定义一个正则
            return msg.replace(/单纯/g,arg)
        })

当然也可以传递多个参数比如：

{ { msg | msgFormat('疯狂','123') }}

Vue.filter('msgFormat',function(msg,arg,arg1)
对应关系如下

也可以定义多个管道符，比如这里msg交给msgFormat处理之后，还会将处理结果交给test在进行处理，最后将最终的结果输出。完整代码如下:

    
    
    
    
    



    

        
{
    { msg | msgFormat('疯狂','123') | test }}
    
        
    

接下里定义一个时间格式化的过滤器，来解决上期demo的时间显示问题。
未处理之前：

{
    { item.ctime | dateFormat }}

在js中的处理如下：

//全局过滤器，进行时间的格式化
// 所谓的全局过滤器，就是所有的VM实例都共享的，一般不需要加S 比如filter 公有 fileters 私有
//这里的dateStr就是item.ctime
Vue.filter('dateFormat',function (dateStr){
     
            //根据给定的时间字符串，得到特定的时间
            var dt = new Date(dateStr)
            //yyyy-mm-dd
            var y = dt.getFullYear()
            //getMonth()从0开始，所以+1
            var m = dt.getMonth() + 1
            //星期
            var d = dt.getDate()
            //这种方式比较乱
            return y + '-' + m + '-' + d 
        }),

最后显示出来就是yyyy-mm-dd这种形式，但是有可能需求是要精确到秒，并且管道符传递的参数我们不知道，有可能是dateFormat(‘YYYY-mm-dd’),也有可能是dateFormat(‘yyyy-MM-dd’)所以这里需要对传过来的参数做一个判断。
这里我们传递一个空字符串，它默认显示最全的时间，

<td>{
     {
      item.ctime | dateFormat('') }}</td>

这里的${}在倒单引号里面的形式是模板字符串，最直观的优势就是省得去敲无数个单引号了。

`${
       y}-${
       m}-${
       d}-${
       hh}-${
       mm}-${
       ss}`

Vue.filter('dateFormat',function (dateStr,pattern){
     
            //根据给定的时间字符串，得到特定的时间
            var dt = new Date(dateStr)
            //yyyy-mm-dd
            var y = dt.getFullYear()
            //getMonth()从0开始，所以+1
            var m = dt.getMonth() + 1
            //星期
            var d = dt.getDate()
//这里因为不知道传过来的字符串是什么格式，直接全部转为小写，如果有时分秒，也写上
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
     
                return `${
       y}-${
       m}-${
       d}`
            }else{
     
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${
       y}-${
       m}-${
       d}-${
       hh}-${
       mm}-${
       ss}`
            }

管道符也可以不传递参数，像这样

<td>{
     {
      item.ctime | dateFormat }}</td>

这时pattern这里要写一个默认的形参pattern = ‘’
简单解释：https://blog.csdn.net/qq_39723600/article/details/83021404

//当dateFormat不传递参数时，pattern = ''这里得设置形参默认值
Vue.filter('dateFormat',function (dateStr,pattern = '')

私有（局部）过滤器

定义私有过滤器和前面一样，过滤器的两个条件 过滤器名称 和 处理函数不可少。过滤器调用的时候 采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时优先调用私有过滤器。测试一下

<div id="app2">
    <h3>{
     {
      dt | dateFormat }}</h3>
</div>

 var vm2 = new Vue({
     
            el:'#app2',
            data:{
     
                dt:  Date()
            },
            methods:{
     

            },
            // filter 公有 fileters 私有
            filters: {
     dateFormat: function(dateStr,pattern = ''){
                 
                //根据给定的时间字符串，得到特定的时间
                var dt = new Date(dateStr)
                //yyyy-mm-dd
                var y = dt.getFullYear()
                //getMonth()从0开始，所以+1
                var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                var d = dt.getDate().toString().padStart(2,'0')
                // return y + '-' + m + '-' + d
                //模板占位符
                if(pattern.toLowerCase() === 'yyyy-mm-dd'){
     
                    return `${
       y}-${
       m}-${
       d}`
                }else{
     
                    var hh = dt.getHours().toString().padStart(2,'0')
                    var mm = dt.getMinutes().toString().padStart(2,'0')
                    var ss = dt.getSeconds().toString().padStart(2,'0')
                    return `${
       y}-${
       m}-${
       d}-${
       hh}-${
       mm}-${
       ss}--------`
                }
                }
            },

这里用到了字符串填充方法padStar()、padEnd()
试用场景

图中时间 秒 显示一位，当然有可能月、时分秒都有可能这样显示，使用padStar()函数将其补充完整，padStar为字符函数，所以先toString()为字符串。

var m = (dt.getMonth() + 1).toString().padStart(2,'0')

padStar()中的参数，其中2表示一共补充为2位，‘0’表示要在“月”这个字符串的开始补充0。padEnd()同理。