vue2.0 过滤器

魔术师ID

已于 2025-05-19 23:25:49 修改

阅读量895

点赞数 24

CC 4.0 BY-SA版权

分类专栏： Vue2.0 文章标签： vue.js 前端 javascript

于 2025-05-19 09:07:04 首次发布

本文链接：https://blog.csdn.net/qq_45585640/article/details/148055233

Vue2.0 专栏收录该内容

15 篇文章

订阅专栏

个人简介

👨‍💻‍个人主页：魔术师
📖学习方向：主攻前端方向，正逐渐往全栈发展
🚴个人状态：研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流严禁用于商业用途，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

vue2.0 过滤器目录

文章目录

5.过滤器

5.1 过滤器概念

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。
过滤器可以用在两个地方：
1. 插值表达式
2. v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

5.2 定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 调用过滤器的语法： -->
    <!-- <p>{{ message | 过滤器 }}</p> -->
    <!-- 注意：在调用过滤器的时候 | 叫做“管道符” -->
    <p>{{ message | capt }}</p>
    <p>{{ info | capt }}</p>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 声明过滤器的语法：
    // Vue.filter('过滤器的名字', 过滤器的fucntion函数)
    // 过滤器的本质：就是一个 function 函数
    // 过滤器的 function 函数，第一个形参，永远都是 | 前面那个值
    Vue.filter('capt', function (val) {
      // 注意：过滤器函数，必须 return 一个处理的结果，
      // 如果没有 return 任何结果，就是一个无效的过滤器

      // 1. 把 val 的首字母转为大写
      const result = val.charAt(0).toUpperCase() + val.slice(1)
      // 2. 把转化的结果，return 出去
      return result
    })

    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js',
        info: 'my name is xxx'
      }
    })
  </script>
</body>

</html>

5.3 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为私有过滤器，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 调用过滤器的语法： -->
    <!-- <p>{{ message | 过滤器 }}</p> -->
    <!-- 注意：在调用过滤器的时候 | 叫做“管道符” -->
    <p>{{ message | capt }}</p>
    <p>{{ info | capt }}</p>
    <p>{{ message | test }}</p>
    <p>--------------</p>
    <p>{{ message | capt | test }}</p>
  </div>

  <hr>

  <div id="app2">
    <h3>{{ msg | capt }}</h3>
    <!-- <h3>{{ msg | test }}</h3> -->
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 声明过滤器的语法：
    // Vue.filter('过滤器的名字', 过滤器的fucntion函数)
    // 过滤器的本质：就是一个 function 函数
    // 过滤器的 function 函数，第一个形参，永远都是 | 前面那个值
    Vue.filter('capt', function (val) {
      // 注意：过滤器函数，必须 return 一个处理的结果，
      // 如果没有 return 任何结果，就是一个无效的过滤器

      // 1. 把 val 的首字母转为大写
      const result = val.charAt(0).toUpperCase() + val.slice(1)
      // 2. 把转化的结果，return 出去
      return result
    })

    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js',
        info: 'my name is xxx'
      },
      // 私有过滤器节点
      filters: {
        // 形参中的 val 就是调用过滤器时候， | 前面那个值
        test(val) {
          return val + '~~'
        }
      }
    })

    const vm2 = new Vue({
      el: '#app2',
      data: {
        msg: 'welcome xxx'
      }
    })
  </script>
</body>

</html>

5.4 连续调用多个过滤器

过滤器可以串联地进行调用

 <p>{{ message | capt | test }}</p>

5.5 过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>{{ msg | maxLength(3) }}</p>
    <p>{{ maxLength2(msg, 5) }}</p>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    Vue.filter('maxLength', function (val, endIndex = 3) {
      if (val.length <= endIndex) {
        return val
      }
      // 字符串的 slice 函数，接收俩参数：
      // 开始的下标（包含）
      // 结束的下标（不包含）
      // slice/substr/substring
      return val.slice(0, endIndex) + '...'
    })

    const vm = new Vue({
      el: '#app',
      data: {
        msg: '1234567890'
      },
      methods: {
        maxLength2(val, endIndex = 3) {
          if (val.length <= endIndex) {
            return val
          }
          // 字符串的 slice 函数，接收俩参数：
          // 开始的下标（包含）
          // 结束的下标（不包含）
          // slice/substr/substring
          return val.slice(0, endIndex) + '...'
        }
      },
    })
  </script>
</body>

</html>