Vue.js 自定义过滤器

Vue.filter('reverse',function(value)){
    return value.spilt('').reservse().join('');
});

<span v-text="msg | reverse"></span>

Vue.filter('wrap',function(value,begin,end){
    return begin + value + end;
});

<span v-text="msg | wrap 'before' 'after'"></span>
<!-- 双向绑定 -->
Vue.filter(id,{
    read:function(val){ reurn 'read ' + val;},
    write:function(newVal,oldVal){ return 'write' + val;}
});

<!-- 动态参数 -->
<input v-model="userInput">
<span>{{msg | concat userInput}}</span>

Vue.filter('concat',function(value,input){
    return value + input
});

使用 Vue.filter() 自定义过滤器需要在 Vue 实例化之前定义,否则不起作用
自定义过滤器的另一种写法

new Vue({
    el:"#el",
    data:{},
    filters:{
        reverse:function(value){
            return value.split('').reverse().join('');
        }
    }
});

猜你喜欢

转载自blog.csdn.net/wuxinwudai/article/details/80910487