欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue过滤器

程序员文章站 2022-06-04 14:36:01
...

vue.js允许你自定义过滤器,可被用作一些常见的文本的格式化,过滤器可以用在插值表达式{{  }}或者v-bind表达式中,其他地方不能使用的,对原数据没有修改,只是在渲染的最后一步对数据进行了处理

过滤器调用时的格式:{{ name | nameope('科学家:') |  beauty('著名的') }}   name是要渲染的数据 | 是管道  nameope为过滤器名称 ,科学家是过滤器的第二个参数,默认name才是过滤器的第一个参数,当然也能传多个参数,也能调用多个过滤器,当然数据的处理要按照顺序来

定义全局过滤器:所有的vm实例共享

Vue.filter(nameope, function(data, msg){

//data就是调用该过滤器时管道|前面的原始数据name

//在这里对数据进行处理  比方说name前面追加‘大明星:’

return msg+data

})

Vue.filter(beauty, function(data,msg){
    return msg+data
})

定义私有过滤器:

var vm = new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
    
    },
    filters: {
        //在此处定义私有的过滤器
        nameope:function(data,msg){
            retrun msg+data
        }
    }

}) 

过滤器调用时,就近调用,如果私有过滤器和全局过滤器名称一致,优先调用私有过滤器。