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

最新推荐文章于 2024-07-04 10:07:27 发布

非正式搬砖工

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量519

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37607502/article/details/102999146

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

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

全局过滤器

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

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

过滤器传递“疯狂”

<div id="app">
        <p>{{ msg | msgFormat('疯狂')  }}</p>
</div>

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

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

当然也可以传递多个参数比如：
<p>{{ msg | msgFormat('疯狂','123') }}</p>

Vue.filter('msgFormat',function(msg,arg,arg1)
对应关系如下
在这里插入图片描述
也可以定义多个管道符，比如这里msg交给msgFormat处理之后，还会将处理结果交给test在进行处理，最后将最终的结果输出。完整代码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ msg | msgFormat('疯狂','123') | test }}</p>
    </div>
        
    <script>
        //定义一个全局的 vue 过滤器 
        Vue.filter('msgFormat',function(msg,arg,arg1){
            //字符串的replace 第一个参数，除了可写一个字符串外，还可以定义一个正则
            return msg.replace(/单纯/g,arg+arg1)
        })

        Vue.filter('test',function(msg){
            return msg + '111112222'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'曾经，我也是一个单纯的少年，单纯的我，谁才是这个世界上最单纯的人'
            },
            methods: {}
        });
    </script>
</body>
</html>

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

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

在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()同理。

非正式搬砖工

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端框架Vue学习06——过滤器的基本使用

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

扫一扫

专栏目录