vue(vue.js)—过滤器

longkui / 2024-10-23 / 原文

原文链接：vue(vue.js)—过滤器 – 每天进步一点点 (longkui.site)

vue中的过滤器是对要显示的数据进行特定格式化后进行显示。比如最常用的保留两位小数，我们就可以用过滤器实现，它并没有改变原始数据的值，只是通过新的方式显示出来。功能类似于angular中的管道。

对于过滤器要知道两点

1.对要显示的数据进行特定格式化后再显示。

2.并没有改变原本的数据，只是用新的数据进行显示。

3.过滤器的本质就是一个函数

0.简单的用法

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
 
<body>
    <div id="root">
        <h3>格式化前的时间{{time}}</h3>
        <h3>格式化后的时间{{time | timeFormat }}</h3>
        
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
                time:new Date().getTime()  //获取时间戳
            },
             
            //过滤器
            filters:{
                timeFormat(value){
                    //value值就是 ‘|’ 的值,return 会直接替换掉原来的值
                    console.log(value)
                    return  moment(value).format("YYYY-MM-DD")
                }
            }
         
        })
    </script>
</body>
</html>

效果如下：

上方所谓的过滤器就是 {{ time | timeFormat}} 这一部分，主要是“|” 这个符号解析的，vue读取的时候，先将“|” 符号前的time 作为传递到 timeFormat这个函数中，这个函数调用了momentjs对时间进行了格式化然后返回到页面中进行展示。

当然这个也支持自定义参数格式，也就是你的时间格式化的结果不一定只有一种，可能有很多种。

2.组合用法

过滤器可以多个连在一起用，类似{{ time | timeFormat | str1 | str2 }} 这种，原则上可以无限套娃，但是实际开发中用的并不多，最多用过两层。

举例来说，上面的我们格式化时间后假如只想截取前几位，那么可以用字符串截取函数。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
 
<body>
    <div id="root">
        <h3>格式化前的时间{{time}}</h3>
        <h3>格式化后的时间{{time | timeFormat }}</h3>
 
        <h3>格式化前的字符串{{str}}</h3>
        <h3>格式化后的字符串{{str | mystr | mySlice}}</h3>
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
                time:new Date().getTime(),  //获取时间戳
                str:"ni hao!"
            },
             
            //过滤器
            filters:{
                timeFormat(value){
                    //value值就是 ‘|’ 的值,return 会直接替换掉原来的值
                    console.log(value)
                    return  moment(value).format("YYYY-MM-DD")
                },
                //字符串截取过滤器
                mySlice(value){
                    console.log("mySlice",value)
                    return value.slice(0,3)
                },
                //字符串拼接过滤器
                mystr(value){
                    console.log("mystr",value)
                    return value+"hello"
                }
            }
         
        })
    </script>
</body>
 
</html>