Vue过滤器的使用

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

一，不带参数的过滤器及其使用

1，不带参数的过滤器的定义语法

注意：全局过滤器没有加s

Vue.filter('过滤器名称', function(msg){})  //其中msg是过滤器管道符前面传递过来的数据

2，不带参数的过滤器调用时的格式 {{ msg | 过滤器名称}}，注意：过滤器不会改变原始数据

3，定义一个无参数的全局过滤器

Vue.filter('msgFormat', function(msg){
        return msg.replace(/你好/g, '替代内容')
    })

4，使用一

<div id="app">
    <p>{{msg | msgFormat}}</p>
</div>

<script>
    //定义一个Vue全局的过滤器
    Vue.filter('msgFormat', function(msg){
        return msg.replace(/你好/g, '替代内容')
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好1你好2你好3你好4'
        },
        methods: {

        }
    })
</script>

二，不带参数的过滤器及其使用

1，定义一个带参数的全局过滤器

Vue.filter('msgFormat', function(msg, arg){
        return msg.replace(/你好/g, arg)
    })

2，使用

<div id="app">
    <p>{{msg | msgFormat('疯狂')}}</p>
</div>

<script>
    //定义一个Vue全局的过滤器
    Vue.filter('msgFormat', function(msg, arg){
        return msg.replace(/你好/g, arg)
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好1你好2你好3你好4'
        },
        methods: {

        }
    })
</script>

三，过滤器可以串联

<div id="app">
    <p>{{msg | msgFormat('疯狂') | test}}</p>
</div>

<script>
    //定义一个Vue全局的过滤器
    Vue.filter('msgFormat', function(msg, arg){
        return msg.replace(/你好/g, arg)
    })
    Vue.filter('test', function(msg){
        return msg + '====='
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好1你好2你好3你好4'
        },
        methods: {

        }
    })
</script>

 四，定义一个私有过滤器

私有过滤加s

var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好1你好2你好3你好4'
        },
        methods: {},
        // 过滤器有两个条件：过滤器名称 处理函数
        filters: {
           msgFormat2: function(msg){
               return this.msg + '私有过滤器'
           }
        }
    })