关注我

    我的微信
在线咨询 x
在线咨询
有什么可以帮到你
点击咨询

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

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

过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另外一个形式的数据,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。例如,从['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、过滤器的作用是:过滤器可以用来筛选出符合条件的,丢弃不符合条件的,既可以筛选,又可以对筛选出来的进行加工。