Vue中使用过滤器处理数据

在开发中,往往显示在页面上的数据需要经过特殊的处理,如果我们每次在渲染页面的时候来更改数据的格式,那样很麻烦,也加大了开发负担。那么有没有一个方式,可以统一的格式化数据。在Vue中就有过滤器来处理展示在页面上的数据

加过滤器()只改变显示的效果,不改变原数据

在{{}}中的数据之后加上 | 后边是过滤器函数
我们在下边的页面中使用 tofixed("时间") 将“时间”作为参数传递

                        
                            {{index+1}}
                                
                            
                            {{data.name}} 
                            
                            {{data.date | tofixed("时间")}} 
                            {{data.time}} 
                            
                                
                            
                        

数据处理

Vue有filters命令来自定义过滤器在filters中我们定义tofiexd()方法:
tofixed(参数1,参数2) 参数1是 页面中 | 前边的数据 参数2是tofixed中传递的参数。我们只需要在tofixed()中将处理过后的数据返回就可以了。

        var vm = new Vue({
            el: '#app',
            filters: { //可以有很多的自定义过滤器
                tofixed(input, param1) { //这里的this 是window  input是指 | 符号之前的数据 param1 是参数,可以用更多的参数                                
                    return param1 + input;
                }
            })

你可能感兴趣的:(Vue中使用过滤器处理数据)