vue过滤器

132 阅读1分钟

一、过滤器

基本使用: 在插值语法中加 | 比如:{{message | capi}}

过滤器函数,必须定义到filters节点之下 过滤器本质是函数 过滤器中的形参,永远都是“管道符”前面的那个值

私有过滤器

在filters节点下的都是私有过滤器  只能在当前绑定的vue实例下使用 

filters:{
                capi(val){
//val = data中的数据
                    return 'abc'
                }

全局过滤器

Vue.filter()独立于每个实例之外

这个方法又两个参数

第一个参数,是全局过滤器的名字

第二个参数,是全局过滤器的处理函数.

示例:

Vue.filter('capi',function(val){

            let first = val.charAt(0).toUpperCase();

            let other = val.slice(1)

            return first + other

        })

需要定义在实例化vue对象的上面。

消除渲染时的过渡

当页面刷新的时候data中的数据还没有渲染出来,页面中就会显示原本写的插值语法,这时候就需要消除这个bug

在绑定的实例化对象的元素上上添加v-cloak 并在style样式中添加(只要前面加上v-都可以实现,随意命名,通常使用clock)

[v-cloak]{
            display: none;

        }

二、自定义指令