基于Vue文档对过滤器的理解以及使用

1.过滤器

过滤器是Vue中内置的一种工具,现,今官方Vue.js也允许我们去自定义过滤器了,使用过滤器可以用于一些常见的文本的格式化,也可以用来帮助处理时间,进行自定义的格式转化返回相应的值。

// 过滤器可以用在两个地方 :  双花括号插值  以及  v-bind 表达式(vue 2.1.0+支持)
// 他应该被添加在JavaScript表达式的尾部 由"管道"符号指示

// 左边是要传入或者处理的值  右边是过滤器名称
// captilize 这个过滤器函数 会将 左边 message 的值作为第一个参数
// 最终花括号 或者 v-bind 里面的值会是接收了message 进行处理返回后得结果

// 双花括号中使用 
{{ message  |  capitalize }}

// 在 v-bind 中使用 
<div v-bind:id="rawId  |  formatId"></div>

// Vue文档模板  在本地注册一个过滤器写法 (局部过滤器)
filters: { 
  capitalize: function (value) { 
     if (!value) return '' 
     value = value.toString() 
     return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

// 在main.js中注册一个全局过滤器 (在创建Vue实例之前全局定义过滤器)
Vue.filter('capitalize', function (value) { 
     if (!value) return '' 
     value = value.toString() 
     return value.charAt(0).toUpperCase() + value.slice(1) 
}) 

new Vue({
   // ... 
})

2.参照上面文档 个人自定义过滤器如下(全局)

在全局注册一个自定义过滤器    
// 将传入的时间进行处理 被传入的值用new Data()处理 然后取出年月日重新拼接并返回 
// 最终就可以获得自己想要的格式   这就类似于在封装一个方法   然后直接引入传值使用
// 过滤器
// Vue.filter(过滤器的名称 处理函数)
Vue.filter('forMat', data => {
  // console.log(data, 88)
  var t = new Date(data)
  console.log(t, 8888888)
  var yy = t.getFullYear()
  var mm = (t.getMonth() + 1).toString().padStart(2, 0)
  var dd = t.getDate().toString().padStart(2, 0)
  return `${yy}-${mm}-${dd}`
})

<el-table-column label="入职时间" width="120">
    <template slot-scope="scoped">
       <!-- 管道符 -->
       <!-- {{ scoped.row.timeOfEntry }}==== -->
       {{ scoped.row.timeOfEntry | forMat }}
    </template>
</el-table-column>

3.过滤器也可以串联使用

例如 : 
{{ message  |  filterA  |  filterB }}
// 这里 filterA先接收 message的值  然后返回一个结果, 然后 filterB 会将 filterA 返回的结果又带入进行处理 
// 因为过滤器是JavaScript函数 因此他可以接收参数

4.除了上述自定义的过滤器以外 Vue还有自带的过滤器

除了上述自定义的过滤器以外 Vue还有自带的过滤器 
1、capitalize 首字母大写
2、uppercase 全部大写
3、uppercase 全部小写
4、currency 输出金钱以及小数点
(1)第一个参数 货币符号
(2)第二个参数 小数点后位数
5、pluralize 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。
如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。
如果值的个数多于参数的个数，多出的使用最后一个参数。
6、debounce 包装处理器，让它延迟执行 x ms， 需在@里面使用7、limitBy 需在v-for(即数组)里面使用
(1)第一个参数 取得数量
(2)第二个参数 偏移量
8、filterBy 需在v-for(即数组)里面使用
(1)第一个参数 需要搜索的字符串
(2)第二个参数: in (可选,指定搜寻位置)
(3)第三个参数 (可选,数组格式)
9、orderBy 需在v-for(即数组)里面使用
(1)第一个参数 需要搜索的字符串
(2)第二个参数 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序

5.(补充) JS中new Date()的使用方法

获取时间：\
var date = new Date();//获取系统当前时间\
获取特定格式的时间：\
1 date.getYear(); //获取当前年份(2位)\
2 date.getFullYear(); //获取完整的年份(4位,1970-????)\
3 date.getMonth(); //获取当前月份(0-11,0代表1月)\
4 date.getDate(); //获取当前日(1-31)\
5 date.getDay(); //获取当前星期X(0-6,0代表星期天)\
6 date.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)\
7 date.getHours(); //获取当前小时数(0-23)\
8 date.getMinutes(); //获取当前分钟数(0-59)\
9 date.getSeconds(); //获取当前秒数(0-59)\
10 date.getMilliseconds(); //获取当前毫秒数(0-999)\
11 date.toLocaleDateString(); //获取当前日期\
12 var mytime=date.toLocaleTimeString(); //获取当前时间\
13 date.toLocaleString( ); //获取日期与时间