〖Vue〗小知识-自定义过滤器 filter

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文我们学习 Vue 相关的结合代码实练的一些基础知识实践, 本文 来学习 Vue 的一个效率方法 自定义过滤器, 方便处理数据

Vue 自定义过滤器

自定义过滤器

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

过滤器使用方法:

先看下使用方法: 书写挺简单的, 通过 管道符: | , | 前面放置我们要处理的数据, 后面跟上处理数据的方法即过滤器的方法名

1. 在双大括号中, 即在插值表达式中处理数据
2. 在 v-bind 中, 绑定值时 同第一个方法的写法格式:

<!-- 在双花括号中 -->
{{ message | capitalize }}

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

过滤器方法的定义:

vue 的过滤器就是限定格式用的 其使用语法如下:

1. 在创建 Vue 实例之前全局定义过滤器：

   Vue.filter("过滤器的名字",(被修饰的数据)=>{
       return 修饰后的数据
   }
   

2. 还可以在组件内定义, 如下格式:

      filters: {
        过滤器的名字: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
   

项目实战中的栗子:

import Vue from 'vue'

// 不足两位的前面加 0  后面加 0 方法是 padEnd(2,"0") >>> 2为位数,"0"为要加的内容
Vue.filter('addzero', (value, p) => {
  return String(value).padStart(2, '0') + p
})

参考 官方文档

• Vue 官方文档: cn.vuejs.org/
• Vue 官方文档-过滤器: cn.vuejs.org/v2/guide/fi…