「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。

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

<!-- 在双花括号中 --> 
{{ message | capitalize }} 
<!-- 在 `v-bind` 中 --> 
<div v-bind:id="rawId | formatId"></div>

全局过滤器

过滤器调用的时候采用就近原则，如果私有过滤器和全局过滤器名称一致了，会优先调用私有过滤器

全局过滤器的定义语法 Vue.filter('过滤器的名称', function(){}) 过滤器中的 function中的第一个参数，永远都是过滤器管道符前面传递过来的数据

创建一个vue实例，使msg（abc）通过过滤器显示出来后变成 abc123

    <div id="app">
        <div>
            <p> {{ msg | msgFilter }}</p>
        </div>
    </div>
    <script>
        Vue.filter('msgFilter', function(msg){
            return msg + "123";
        })
        let vm = new Vue({
            el:"#app",
            data:{
                msg: "abc"
            },     
            methods: {
               
            }
        })
    </script>

另外还要多个参数的过滤器，也一样很简单，只需要在参数上加上对应的变量就可以了

<p> {{ msg | msgFilter2('one', 'two') }}</p>

 Vue.filter('msgFilter2', function(msg, arg1, arg2){
     return msg + " " + arg1 + " " + arg2;
 })

当参数没有对应的时候，传递过来2个值msgFilter2('one', 'two')， Vue.filter('msgFilter2', function(msg, arg1)只要一个接收的参数，就只会将 'one' 赋值给 arg1

局部过滤器

局部过滤器的定义语法：过滤器名称和处理函数我们另外创建一个只能在范围el: "#app2"中使用的私有过滤器

        let vm2 = new Vue({
            el: "#app2",
            data: {
                msg: "abc"
            },
            filters: {
                msgFilter(msg){
                    return msg + '私有的';
                }
            }
        })

分别渲染到页面

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

当两个一样名称的过滤器，可以看到 id="app" 中的msg使用的是全局的过滤器，id="app2" 会优先调用私有过滤器，并只调用私有的。

过滤器应用-时间格式化

dateFormat过滤器传递的格式化模板只提供 'yyyy-mm-dd' 和 'yyyy-mm-dd hh:mm:ss'

<div id="app">
    <p>{{ date | dateFormat('yyyy-mm-dd') }}</p>
</div>

.padStart(2, '0')的意思就是不足两位数的时候在前面补0 ，如果补上'0'超过了两位数，就会对字符串'0'进行截取.

        Vue.filter('dateFormat', function(date, format=""){
            var y = date.getFullYear();
            var m = ( date.getMonth()+1 ).toString().padStart(2, '0');
            var d = date.getDate().toString().padStart(2, '0');;
            if( format === 'yyyy-mm-dd'){
                return `${y}-${m}-${d}`;
            }else{
                var hh = date.getHours().toString().padStart(2, '0');;
                var mm = date.getMinutes().toString().padStart(2, '0');;
                var ss = date.getSeconds().toString().padStart(2, '0');;
                return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`;
            } 
        })

        let vm = new Vue({
            el: "#app",
            data: {
                date: new Date()
            },
            methods: {
            }
        })

vue过滤器

全局过滤器

局部过滤器

过滤器应用-时间格式化