Vue 过滤器

优质

小牛编辑

147浏览

2023-12-01

1. 前言

本小节我们将学习如何使用过滤器。包括如何注册过滤器、过滤器的使用、过滤器的串联、过滤器的传参。过滤器的使用非常简单，同学们只需要多写几个例子就可以完全掌握。

2. 慕课解释

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 — 官方定义

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。过滤器在日常开发中也会大量使用，例如：枚举值的转换、首字母大写等等。

3. 定义过滤器

Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用，局部注册的过滤器只能在当前组件内部使用。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

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

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

接下来我们介绍全局过滤器和局部过滤器的注册方式。

3.1. 定义全局过滤器

通过 Vue.filter( name, function(){} ) 方式注册全局过滤器，第一个参数 name 为自定义过滤器名称；第二个参数是过滤函数，返回处理后的值。

一个首字母大写的过滤器：

案例演示预览复制复制成功！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <div>
      <label>英文名：</label>
      <input type="text" v-model="name"/>
    </div>
    <div>{{ name | capitalize}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: ''
      }
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-7 行，我们定义了过滤器 capitalize，用来给字符串的首字母大写。
HTML 代码第 6 行，我们通过插值的方式使用过滤器 capitalize。

3.2 定义局部过滤器

在 Vue 实例 options 中使用 filters 选项来注册局部过滤器，这样过滤器只能在这个实例中使用：

filters: {
  '过滤器名字': function(value) {
    // 具体过滤逻辑
  }
}

具体示例：

案例演示预览复制复制成功！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <div>
      <label>英文名：</label>
      <input type="text" v-model="name"/>
    </div>
    <div>{{ name | capitalize}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: ''
      }
    },
    filters: {
      capitalize: function(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 10-16 行，我们定义了局部过滤器 capitalize，用来给字符串的首字母大写。
HTML 代码第 6 行，我们通过插值的方式使用过滤器 capitalize。

4. 过滤器串联

{{ message | filterA | filterB }}

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

案例演示预览复制复制成功！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <div>
      <label>英文名：</label>
      <input type="text" v-model="name"/>
    </div>
    <div>{{ name | trim | capitalize}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })
  Vue.filter('trim', function(value) {
    return value.replace(/^\s+|\s+$/g,"")
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: ''
      }
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-7 行，我们定义了全局过滤器 capitalize，用来给字符串的首字母大写。
JS 代码第 8-10 行，我们定义了全局过滤器 trim，用来处理字符串中的空格。
HTML 代码第 6 行，我们通过串联的方式使用两个过滤器。

5. 接收多个参数的过滤器

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

<!-- 在双花括号中 -->
{{ message | filteName(params1,params2) }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName(params1,params2)"></div>

案例演示预览复制复制成功！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <div>
      <label>个数：</label>
      <input type="number" v-model="count"/>
      <label>单位： 1000 </label>
    </div>
    <div>单价： {{price}} / 个</div>
    <div>总价： {{ count | sum(price, unit)}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.filter('sum', function(value, price, unit) {
    return value * price * unit
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        count: 0,
        unit: 1000,
        price: 20
      }
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-5 行，我们定义了全局过滤器 sum，用来计算购买数量的总价。
HTML 代码第 8 行，使用过滤器 sum，并传入参数 price 和 unit。

6. 小结

本节，我们带大家学习了自定义过滤器的使用方式。主要知识点有以下几点：

使用 Vue.filter 定义全局过滤器。
使用 Vue 实例上的 filters 属性定义局部过滤器。
过滤器的串联和参数的传递。