Vue-过滤器介绍与实例

Vue.js中过滤器（filter）的使用

一、Vue中的过滤器分为两种：私有(局部)过滤器和全局过滤器。
二、Vue过滤器：允许你自定义过滤器，可被用作一些常见的文本格式化。
三、Vue过滤器可以被用在两个地方：插值和V-BInd 由管道符(’|’)指示。
四、Vue过滤器声明语法：Vue.filter(‘过滤器名称’，function(msg,arg1,arg2){}) 支持多参数，第一个参数总是msg，表示管道符(’|’)前面的数据。
五、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

---

定义无参数全局过滤器：

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

        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter('msgFormat', function(msg) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, 'xx')
            })
        </script>

有参数全局过滤器：

 <script>
        //定义全局过滤器（所有的Vue实例都可以共享）
        //msg-要格式化的数据，arg参数
        Vue.filter('nameFormat', function(msg, arg, arg1) {
            //return msg.replace("单纯",arg)  只替换了第一处，可以使用正则表达式全局替换
            return msg.replace(/单纯/g, arg + arg1); //同时应用
        });

元素也可以同时调用多个过滤器：

   <!-- 一个元素(插值表达式)可以应用多个过滤器，按顺序依次格式化，最终返回结果数据 -->
    <div id="app">
        <!-- <p>{{name | nameFormat("疯狂")}}</p> -->
        <p>{{name | nameFormat("疯狂","----")| text }}</p>
    </div>

---

私有过滤器和全局过滤器参数化使用和调用方式都一样，就是写的位置和作用域不同···
局部(私有)过滤器：

       var Vm2 = new Vue({
                el: "#app2",
                data: {
                    ctime: new Date()
                },
                methods: { 
                },
                //私有过滤器
                filters: {
                    DateFormat: function(msg, fatten = '') {
                        //日期和时间有可能需要补领的可以使用String.padstart('填充后的长度','填充字符')--padEnd('','')
                        var date = new Date(msg)
                        var y = date.getFullYear()
                        var m = (date.getMonth() + 1).toString().padStart(2, '0')
                        var d = date.getDate()
                        if (fatten.toLowerCase() == 'yyyy-mm-dd') {
                            // return y + '-' + m + '-' + d
                            //模板字符串
                            return `${y}-${m}-${d}`
                        } else {
                            //详细日期格式
                            var h = date.getHours()
                            var ms = date.getMinutes()
                            var s = date.getSeconds();
                            return `${y}-${m}-${d} ${h}:${ms}:${s}` //模板字符串根据某种格式提供占位与复制的字符串
                        }
                    }
                }
            })

私有过滤器的调用：

  <!-- 使用私有过滤器，只在Vue本实例中使用 -->
    <!-- Vue过滤器调用顺序：私有->全局
     -->
    <div id="app2">
        <p>{{ctime | DateFormat('yyyy-mm-dd')}}</p>
    </div>

注意：

• filter不会修改原始数据，它的作用是过滤数据，最后达到用户界面前的最后一步 可能需要做一些数据格式上的修改，让用户更舒服，其实就是一个优化用户体验的过程。