文章分类

关注我

友情链接

杨青个人博客

在线咨询 x

有什么可以帮到你

点击咨询

Vue学习笔记（7） —— 过滤器 filter的基本使用

作者：王浩铭
分类：WEB前端
时间：2020-10-04
共809人围观

简介过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另外一个形式的数据，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤筛选的工具。

过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另外一个形式的数据，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间戳改为时间格式等等都可以使用过滤器。

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

一、过滤器使用方法

1、{{ msg | filterA }}双括号插值内。

2、<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind绑定的值的地方。（msg为需要filter处理的值，filterA为过滤器。）

3、{{ msg | filterA }}单个使用。

4、{{ msg | 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>过滤器的基本使用</title>
  <script src="https://www.whmblog.cn/static/js/lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p>将msg数据进行过滤器名为msgFormat的过滤，再进行进行过滤器名为test的过滤</p>
    <p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
  </div>

  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      return msg.replace(/单纯/g, arg + arg2)
    })

    Vue.filter('test', function (msg) {
      return msg + '========'
    })


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
      },
      methods: {}
    });
  </script>
</body>

</html>

三、要点

1、过滤器分全局过滤器和局部过滤器

2、过滤器可以用在两个地方：双花括号插值或 v-bind表达式。

3、全局过滤器使用：Vue.filter( filterName，( )=>{ return // 数据处理结果 } ) ，通过全局过滤器讲一个别的小知识点：当我们引用vue框架时，vue会被自动添加到window全局对象上边，而Vue正是一个构造函数，里边定义的是一些静态方法和静态属性，我们知道在ES6类中有静态方法，只有类可以调用！这样也就不难理解了，filter全局过滤器可以被Vue所调用，因为它是一个静态方法。

4、过滤器的作用是：过滤器可以用来筛选出符合条件的，丢弃不符合条件的，既可以筛选，又可以对筛选出来的进行加工。

上一篇：Vue学习笔记（6） ——v-if指令和v-show指令

下一篇：Vue学习笔记（8） ——Vue实例的生命周期