Vue基础知识系列(四)过滤器

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

1. HTML元素：

<div id="app2">
    <h3>{{dt | dataFormat}}</h3>
</div>

1. 私有 filters 定义方式：

var vm2 = new Vue({
        el: "#app2",
        data: {
            dt: new Date()
        },
        methods: {},
        filters: { //定义一个私有过滤器，只能他自己使用，这个和全局过滤器是一样的方法，只是摆放的位置不一样
            dataFormat: function (dataStr, pattern = "") {
                var dt = new Date(dataStr)
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2,"0")//月份是从0开始的，所以要加1
                var d = dt.getDate().toString().padStart(2,"0")
                // return y+"-"+m+"-"+"-"+d
                //也可以使用下面的方法
                // return `${y}-${m}-${d}-${h}-${mt}-${s}`
                // 不知道这个日期是大写还是小写，需要转换一下，但是这个完全是扯淡的，时间是你自己加进去的，还能不知道
                if (pattern.toLowerCase() === "yyyy-mm-dd") {
                    return `${y}-${m}-${d}`
                } else {
                    var h = dt.getHours().toString().padStart(2,"0")
                    var mt = dt.getMinutes().toString().padStart(2,"0")
                    var s = dt.getSeconds().toString().padStart(2,"0")
                    return `${y}-${m}-${d} ${h}:${mt}:${s}-------`
                }
            }
        }

脚下留心

• 定义私有过滤器的是时候，需要在Vue实例对象里面，私有过滤器只能自己调用。私有过滤器定义位置是在methods之后，前面和methods需要使用逗号隔开
• 使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串
• 常用于时间，比如1-9点，1-9分，1-9秒，可以用0来填充
• 无论是.padStart还是.padEnd 有两个参数，第一个参数表示最长是几位，第二个参数表示要用什么来填充。这两个使用的是字符串，所以对于一般时间而言，需要使用一个.toString()方法来转换一下

全局过滤器

1. HTML元素：

   <div id="app">
      <h3>{{dt | dataFormat}}</h3>
   </div>
   

2. 全局 filters 定义方式：

   Vue.filter("dateFormat", function (dataStr, pattern) {
           var dt = new Date(dataStr)
           var y = dt.getFullYear()
           var m = (dt.getMonth()+1).toString().padStart(2,"0")//月份是从0开始的，所以要加1
           var d = dt.getDate().toString().padStart(2,"0")
           // return y+"-"+m+"-"+"-"+d
           //也可以使用下面的方法
           // return `${y}-${m}-${d}-${h}-${mt}-${s}`
           // 不知道这个日期是大写还是小写，需要转换一下，但是这个完全是扯淡的，时间是你自己加进去的，还能不知道
           if (pattern.toLowerCase() === "yyyy-mm-dd") {
               return `${y}-${m}-${d}`
           } else {
               var h = dt.getHours().toString().padStart(2,"0")
               var mt = dt.getMinutes().toString().padStart(2,"0")
               var s = dt.getSeconds().toString().padStart(2,"0")
               return `${y}-${m}-${d} ${h}:${mt}:${s}`
           }
       })
   
   

脚下留心

• 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！