Vue过滤器filter

过滤器介绍

1. 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
2. 语法：
   2.1 注册过滤器：
   全局过滤器： Vue.filter(name,callback) 需要写在Vue实例初始化之前 内部过滤器：new Vue{filter:{}} 和data，methods，watch同一级
3. 过滤器可以在插值语法中使用，也可以在v-bind语法中使用，v-bind中使用较少
   过滤器也可以接受额外参数，多个过滤器可以串联
   过滤器并没有改变原始的数据，会产生新的数据

代码示例：

<script>
    // 注册过滤器
    Vue.filter('getSlice', function (val) {
        return val.slice(0, 4)
    })

    new Vue({
        el: '.app',
        data() {
            return {
                msg: 'hello world!!',
            }
        },
        filters: {
            getSlice1(val) {
                return val.slice(0, 4)
            },
            addPre(val) {
                return '$$-' + val
            },
        },
    }
</script>


<!-- 插值语法中使用过滤器 getSlice和addPre都为过滤器 这里为两个过滤器串联使用 -->
<h4>{{ msg | getSlice | addPre }}</h4>

<!-- v-bind中使用过滤器 比较少用 -->
<h4 :x="msg | getSlice"></h4>