vue 过滤器 filter

一、什么是过滤器?

  过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。

比如讲字符串格式化为首字母大写,讲日期格式化为指定的格式等。

二、vue 过滤器 filter 的使用

1、vue  定义过滤器

vue  全局过滤器

Vue.filter('过滤器名称', function (value1[,value2,...] ) {  

//逻辑代码

})

vue  局部过滤器

new Vue({       
 filters: {      
    '过滤器名称': function (value1[,value2,...] ){
       // 逻辑代码     
      }
    }
})    

2、vue 过滤器的使用

双花括号插值

  <div>{{msg | upper}}</div>

  <div>{{msg | upper | lower}}</div> <!--使用 | 可以连续过滤 -->

v-bind表达式

  <div v-bind:id="id | lower"></div>

vue 过滤器是添加在 js 表达式的尾部,中间由“|”(管道)符号 来进行连接

vue 双花括号插值 过滤器的使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue 过滤器 filter xinbiancheng.cn</title>
</head>

<body>
  <div id="app">
    <!-- vue 双花括号插值的方式实现过滤 -->
    <!-- 实现首字母大写 -->
    <div>{{msg | upper}}</div>
    <!-- 实现首字母大写在小写 -->
    <div>{{msg | upper | lower}}</div>
    <!--使用 | 可以连续过滤 -->
  </div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  /*
  vue 定义全局过滤器
  */
  Vue.filter('upper', function (val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
  });
  Vue.filter('lower', function (val) {
    return val.charAt(0).toLowerCase() + val.slice(1);
  });
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'welcome to xinbiancheng.cn'
    }
  })
</script>

</html>

vue v-bind表达式 过滤器的使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue 过滤器 filter xinbiancheng.cn</title>
</head>

<body>
  <div id="app">
    <!-- vue v-bind表达式 实现过滤 -->
    <!-- 将id的字母大小混合的属性值,实现属性值统一为小写字母 -->
    <div v-bind:id="id | lower">vue v-bind表达式 实现过滤</div>
  </div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  /*
  vue 定义全局过滤器
  */
  Vue.filter('lower', function (val) {
    return val.toLowerCase();
  });
  var vm = new Vue({
    el: '#app',
    data: {
      id: 'AbCD'
    }
  })
</script>

</html>

vue filters 局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。

其作用的区域也是vue实例【#app】控制的区域,不能在其它vue 的组件中使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue 过滤器 filter xinbiancheng.cn</title>
</head>

<body>
  <div id="app">
    <p>请使用正则表达式,替换掉敏感语句</p>
    <p> {{ msg | dataFormat }} </p>
  </div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '请不要跟我,说一些敏感的一些话题。'
    },
    //定义 vue 局部过滤器。只能在当前 vue 对象中使用
    filters: {
      dataFormat(msg) {
        return msg.replace(/敏感/g, '******')
      }
    }
  });
</script>

</html>

通过上面 vue 的 过滤 在 html 中显示的内容为:‘请不要跟我,说一些******的一些话题。’我们发现敏感字已经替换掉了。分析如下:

filters 中 定义了一个局部的过滤器函数,在函数中 使用了字符串的 replace的方法替换敏感字字符串,第一个参数是 /敏感/g正则表达式 

vue filter 全局定义 和 filters 局部过滤器(混合实例)

本实例实现的是 小数变成货币的过滤器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue 过滤器 filter xinbiancheng.cn</title>
</head>

<body>
  <div id="app">
    <h2>过滤器的使用-添加前缀</h2>
    <p>{{352.11 | toRMB}}</p>
    <p>{{657 | toRMB}}</p>
    <p>{{657.22 | toFixed }}</p>
    <p>{{money | toFixed }}</p>
    <p>下面是链式使用,注意先后的顺序,如下面的先添加¥符号再进行小数位变换将会出错,因此要注意先后顺序</p>
    <p>{{ money | toFixed | toRMB }}</p>
  </div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  //vue 过滤器 全局注册
  Vue.filter('toRMB', function (value) {
    return `¥${value}`
  })
  new Vue({
    el: '#app',
    data: {
      money: 826.26,
    },
    //vue 过滤器 局部注册
    filters: {
      toFixed: function (money) {
        return money.toFixed(1)
      },
    },
  })
</script>

</html>

以上这个案例只用到了 JS 的 toFixed() 方法,比较简单,但还是比较实用。

注意:

  • 1、vue 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

  • 2、vue 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

  • 3、vue 过滤器中定义的函数,一定要有返回值。

vue 带参数的过滤器 语法格式

Vue.filter('format', function (value, arg) {
   //value 是原始变量的值,arg 是传递的参数
  })

vue 带参数的过滤器的使用

<div id="app">
    <!-- vue 带参数的过滤器 -->
    <p> {{ date | format('yyyy-MM-dd') }} </p>
  </div>

vue 带参数的过滤器案例:格式化日期

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue 过滤器 filter xinbiancheng.cn</title>
</head>

<body>
  <div id="app">
    <!-- vue 带参数的过滤器 -->
    <p> {{ date | format('yyyy-MM-dd') }} </p>
  </div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  function dateFormat(date, format){} //此地方 dateFormat 是用来定义 格式化日期 过滤器函数
  /*
  vue 过滤器案例:格式化日期
  */
  Vue.filter('format', function (value, arg) {
    return dateFormat(value, arg); //vue 过滤器 调用前面的定义好的函数
  })
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      date: new Date()
    }
  });
</script>

</html>

function dateFormat(date, format){} 函数实现完整代码如下:(此代码已经测试过,大家可以直接复制使用)

<script>
  function dateFormat(date, format) {
    if (typeof date === 'string') {
      var mts = date.match(/(\/Date\((\d+)\)\/)/);
      if (mts && mts.length >= 3) {
        date = parseInt(mts[2]);
      }
    }
    date = new Date(date);
    if (!date || date.toUTCString() == "Invalid Date") {
      return "";
    }
    var map = {
      "M": date.getMonth() + 1, //月份
      "d": date.getDate(), //日
      "h": date.getHours(), //小时
      "m": date.getMinutes(), //分
      "s": date.getSeconds(), //秒
      "q": Math.floor((date.getMonth() + 3) / 3), //季度
      "S": date.getMilliseconds()  //毫秒
    }
    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
      var v = map[t];
      if (v !== undefined) {
        if (all.length > 1) {
          v = '0' + v;
          v = v.substr(v.length - 2);
        }
        return v;
      } else if (t === 'y') {
        return (date.getFullYear() + '').substr(4 - all.length);
      }
      return all;
    });
    return format;
  }
</script>

这函数主要用的到技术是:正则表达式,Date 相关的函数getMonth() ,getDate()getHours(),getMinutes()getSeconds(), getMilliseconds(),Math.floor(),match(),parseInt(),substr()等,这些知识点不是本章重点,需要了解相关的知识,点击链接查看即可。