Vue.js过滤器

文章目录

过滤器

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

定义与调用

过滤器定义时候的格式

Vue.filter('过滤器的名称', function (参数1, 参数2, ...) {
		...
   })
1
2
3

过滤器调用时候的格式

{{ name | 过滤器的名称 }} 
1

小案例：

没有过滤器
在这里插入图片描述
加上过滤器

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>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    
    <p>{{ msg | msgFormat('疯狂', '咕咕嘎嘎') | test }}p>
  div>

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

    // 多次调用过滤器
    Vue.filter('test', function (msg) {
      return msg + '============我们不一样'
    })


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经我还是一个单纯的孩子，无比单纯，单纯的我，就像大单纯一样单纯，我问：谁是世界上最单纯的男人？'
      },
      methods: {}
    });
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

私有过滤器

HTML元素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}td>
1

私有 filters 定义方式：


filters: { 
// 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
    dataFormat(input, pattern = "") { 
    // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
      var dt = new Date(input);
      // 获取年月日
      var y = dt.getFullYear();
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
      var d = dt.getDate().toString().padStart(2, '0');
      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
      // 否则，就返回  年-月-日 时：分：秒
      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
      } else {
        // 获取时分秒
        var hh = dt.getHours().toString().padStart(2, '0');
        var mm = dt.getMinutes().toString().padStart(2, '0');
        var ss = dt.getSeconds().toString().padStart(2, '0');
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=‘’) 或 String.prototype.padEnd(maxLength, fillString=‘’)来填充字符串；

全局过滤器


// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
  var dt = new Date(input);
  // 获取年月日
  var y = dt.getFullYear();
  var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  var d = dt.getDate().toString().padStart(2, '0');

  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  // 否则，就返回  年-月-日 时：分：秒
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`;
  } else {
    // 获取时分秒
    var hh = dt.getHours().toString().padStart(2, '0');
    var mm = dt.getMinutes().toString().padStart(2, '0');
    var ss = dt.getSeconds().toString().padStart(2, '0');

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

相关阅读:
NGINX重写功能和防盗链
第14章_瑞萨MCU零基础入门系列教程之QSPI
离线安装PostgreSQL数据库(v13.4版本)
uniapp 之获取底部安全距离，状态栏高度等
奥比中光亮相全球1024开发者节，与科大讯飞达成战略合作
【TODO】【ETH】以太坊16进制数据解码
模型降阶方法之张量方法
计算机网络概述
free -m 命令详解
使用小程序实现左侧菜单，右侧列表双向联动效果

原文地址：https://blog.csdn.net/weixin_45525272/article/details/118751445