Vue.js过滤器(filter)的使用

Vue.js基础之filter过滤器的使用详解

晚意延年

4656人浏览 · 2022-03-14 17:54:53

晚意延年 · 2022-03-14 17:54:53 发布

一、过滤器作用

vue.js过滤器是在数据显示之前进行处理和筛选。

二、过滤器的使用

1.使用位置：{{ }}插值语法和 v-bind 指令。

2.语法：{{ data | filter1(参数) | fliter2(参数) }}，过滤器应该被添加在JavaScript 表达式的尾部，由 ' | ' 指示。

三、vue内置过滤器

vue1.0中有许多内置过滤器，例如currency、uppercase、lowercase；vue2.0已经删除了所有内置过滤器，那么想要使用过滤器怎么办？

1.使用第三方工具库

如：date-fns库(日期格式化)、moment.js(对时间过滤)

2.自定义过滤器

四、自定义过滤器

1.分类：

全局过滤器、局部过滤器

2.全局过滤器

语法：使用全局方法Vue.fliter( "filterName"，function(data，参数1，参数2 ... ){ ... } )，过滤器写在Vue实例外。data是固定参数，是要进行过滤处理的数据(下同)。

3.局部过滤器

语法：使用全局方法fliters:{ "filterName" ：(data,参数1，参数2 ... ) => { ... } }，过滤器写在Vue实例里面。

五、实例代码

<body>
    <div id="app">
        <!-- 将小于10的数字十位补0 -->
        <h3>{{8 | addZero}}</h3>  //08
        <!-- 将数字保留3位小数 -->
        <h3>{{12.3456789 | number(3)}}</h3>  //12.345
        <!-- 将时间戳显示成年月日时分秒 -->
        <h3>{{currentTime | time}}</h3>  //2022-3-14 17:47:25
    </div>

    <script>
        //自定义全局过滤器(在Vue实例外)
        Vue.filter('addZero',function(data){ //data为固定参数
            return data < 10 ? '0'+data : data; //如果data小于10，给十位补0，否则返回data
        });
        //自定义全局过滤器
        Vue.filter('time',data=>{
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+''+d.getHours()+':'     
                   +d.getMinutes()+':'+d.getSeconds();
        });
        
        new Vue({
            el:"#app",
            data:{
                currentTime:Date.now(),
            },
            //自定义局部过滤器(Vue实例的一个配置)
            filters:{
                number(data,n){ //data为固定参数，n为形参
                    return data.toFixed(n);
                }
            }
        });
    </script>
</body>

六、注意

1、当有局部和全局两个名称相同的过滤器时,会遵循就近原则，即：优先使用局部过滤器

2、一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开，其执行顺序从左往右。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^