19. Vue 过滤器的基本使用 - 头字母大小写转换、字符串拼接

过滤器基本语法Vue.filter( id, [definition] )参数：{string} id{Function} [definition]用法：注册或获取全局过滤器。// 注册Vue.filter('my-filter', function (value) {// 返回处理后的值})// getter，返回已注册的过滤器var m...

海洋的渔夫

3034人浏览 · 2020-03-12 22:37:32

海洋的渔夫 · 2020-03-12 22:37:32 发布

过滤器基本语法

Vue.filter( id, [definition] )

参数：
- {string} id
- {Function} [definition]

用法：

注册或获取全局过滤器。

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

过滤器的官网介绍

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

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

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

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

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

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

下面首先以官网将小写字母转为大写字母的实例，提供源码进行逐步说明。后续还会继续提供几个实例：

使用过滤器字符串替换拼接实例
使用过滤器进行时间格式转化实例

实例：将第一个小写字母转为大写字母的实例 capitalize

1. 局部过滤器定义的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

</head>
<body>

<div id="app">

    <!-- 1.定义一个输入框，使用 v-model 绑定输入值为 msg   -->
    <input type="text" v-model="msg">

    <!-- 2.设置p便签渲染 msg 的数据，也就是说当输入框填写信息，那么p标签则会同步渲染出来   -->
    <p>{{ msg | capitalize }}</p>

</div>

<script>
    // 2. 创建一个Vue的实例
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "" // 定义用来传递数据的msg
        },
        methods: {},
        filters:{ // 定义局部过滤器

            // 定义小写字符转为大写字母的过滤器
            capitalize(value){
                if (!value) return ''; // 当传入的value为null，则返回空字符串
                value = value.toString(); // 将传入的value转为String类型
                return value.charAt(0).toUpperCase() + value.slice(1) // 将字符串的第一个字母转为大写，后面的字符串拼接上
            }

        }
    })
</script>

</body>
</html>

浏览器执行如下：

2. 定义全局过滤器的方式

    // 3. 定义一个全局过滤器，覆盖局部过滤器
    Vue.filter('capitalize', function (value) {
        if (!value) return ''; // 当传入的value为null，则返回空字符串
        value = value.toString(); // 将传入的value转为String类型
        // 将字符串的第一个和第二个字母转为大写，后面的字符串拼接上
        return value.charAt(0).toUpperCase() + value.charAt(1).toUpperCase() +  value.slice(2) + '全局过滤器'
    })

因为当全局过滤器和局部过滤器重名时，会采用局部过滤器。所以，先将上面的局部过滤器注释，看看效果，如下：

3. 确认当全局过滤器和局部过滤器重名时，会采用局部过滤器

浏览器显示如下：

过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

下面在编写一个局部过滤器，将其中a字符使用replace(正则，替换字符串) 替换为b。

            // 替换字符a为b的过滤器
            replace_str(value){
                return value.replace(/a/g, 'b') // 斜杠内为正则内容，g代表全局替换
            }

下面使用串联过滤器，将起码过滤的数据继续替换，如下：

浏览器显示如下：

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

上面的替换字符过滤器中只能将a替换为字母b，下面设置传入参数，将其根据参数进行替换。

// 根据参数替换字符a的过滤器
replace_str(value, arg1, arg2){
    return value.replace(/a/g, arg1 + arg2) // 斜杠内为正则内容，g代表全局替换
}

下面在使用过滤器的位置传入参数：

<!-- 2.设置p便签渲染 msg 的数据，也就是说当输入框填写信息，那么p标签则会同步渲染出来   -->
<p>{{ msg | capitalize | replace_str('c','d') }}</p>

浏览器显示如下：

可以从浏览器中看出，一个字符a被替换为cd了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^