Vue过滤器filters

最新推荐文章于 2023-07-11 14:12:48 发布

白小水i

最新推荐文章于 2023-07-11 14:12:48 发布

阅读量137

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62508027/article/details/130446495

版权

一、过滤器的定义

对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）

二、过滤器使用语法：

1. 注册过滤器

（1）全局过滤器

Vue.filter(name, callback)，其中第一个参数为定义的过滤器的名称，第二个参数为过滤器函数。

代码实现：

<!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>过滤器</title>
  <script src="../../js/vue.js"></script>
  <script src="../../js/dayjs.min.js"></script>
</head>
<body>
  <div id="root">
    <h2>现在的时间是：{{time | forTime}}</h2>
  </div>
  <script>
    Vue.filter('forTime', function(value) {
      return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss');
    });
    new Vue({
      el: '#root',
      data: {
        time: +new Date()
      }
    })
  </script>
</body>
</html>

代码执行结果如下：

（2）局部过滤器

new Vue(filters: { name: function( ){ }}) ，其中name为过滤器名称，以上可以简写为 new Vue( filters: name( ) { })。

代码实现：

<!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>过滤器</title>
  <script src="../../js/vue.js"></script>
  <script src="../../js/dayjs.min.js"></script>
</head>
<body>
  <div id="root">
    <h2>{{msg | mySlice}}</h2>
  </div>
  <script>
    Vue.filter('forTime', function(value) {
      return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss');
    });
    new Vue({
      el: '#root',
      data: {
        msg: '你好啊,Vue'
      },
      filters: {
        mySlice(value) {
          return value.slice(0, 3);
        }
        // 以上函数可以简写为：
        //mySlice: function(value) {
        //    return value.slice(0, 3)
        //}
      }
    })
  </script>
</body>
</html>

执行代码结果如下：

（3）多个过滤器串联以及过滤器接收参数的使用：

过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到filterA函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

作为函数，过滤器可以传递参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

代码实现：

<!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>过滤器</title>
  <script src="../../js/vue.js"></script>
  <script src="../../js/dayjs.min.js"></script>
</head>
<body>
  <div id="root">
    <!-- 不传递参数，表示将当前时间转化为str默认值的形式："YYYY年MM月DD日 HH:mm:ss" -->
    <h2>现在的时间是：{{time | forTime}}</h2>
    <!-- 在forTime()过滤器函数传参，表示转化为'YYYY年MM月DD日'的格式 -->
    <h2>现在的时间是：{{time | forTime('YYYY年MM月DD日')}}</h2>
    <!-- 将filter函数forTime()和mySlice串联使用，先将目前的时间格式化为"YYYY年MM月DD日 HH:mm:ss"的形式，然后只保留前5个字符 -->
    <h2>现在的时间是：{{time | forTime('YYYY年MM月DD日') | mySlice}}</h2> 
  </div>
  <script>
    
    new Vue({
      el: '#root',
      data: {
        time: +new Date(),
        msg: '你好啊,Vue'
      },
      filters: {
        mySlice(value) {
          return value.slice(0, 5);
        },
        forTime(value, str="YYYY年MM月DD日 HH:mm:ss") {
          return dayjs(value).format(str);
        }
      }
    })
  </script>
</body>
</html>

代码运行结果如下：

2. 使用过滤器：

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

{{xxx | 过滤器名}} 或者 v-bind:属性 = "xxx | 过滤器名"

三、注意点：

使用过滤器并没有改变原来的数据，是产生新的对应的数据。

四、完整代码实现：

<!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>过滤器</title>
  <script src="../js/vue.js"></script>
  <script src="../js/dayjs.min.js"></script>
</head>
<body>
  <div id="root">
    <!-- 不传递参数，表示将当前时间转化为str默认值的形式："YYYY年MM月DD日 HH:mm:ss" -->
    <h2>现在的时间是：{{time | forTime}}</h2>
    <!-- 在forTime()过滤器函数传参，表示转化为'YYYY年MM月DD日'的格式 -->
    <h2>现在的时间是：{{time | forTime('YYYY年MM月DD日')}}</h2>
    <!-- 将filter函数forTime()和mySlice串联使用，先将目前的时间格式化为"YYYY年MM月DD日 HH:mm:ss"的形式，然后只保留前5个字符 -->
    <h2>现在的时间是：{{time | forTime('YYYY年MM月DD日') | mySlice}}</h2> <br><br>

    <!-- v-bind使用过滤器 -->
    <input type="text" v-bind:value="message | mySlice1">
  </div>
  <script>
    // 全局过滤器：
    Vue.filter('forTime', function(value, str="YYYY年MM月DD日 HH:mm:ss") {
      return dayjs(value).format(str);
    });
    new Vue({
      el: '#root',
      data: {
        time: +new Date(),
        msg: '你好啊,Vue',
        message: '你好！请输入姓名'
      },
      // 局部过滤器
      filters: {
        mySlice(value) {
          return value.slice(0, 5);
        },
        mySlice1(value) {
          return value.slice(0, 3);
        }
        // forTime(value, str="YYYY年MM月DD日 HH:mm:ss") {
        //   return dayjs(value).format(str);
        // }
      }
    })
  </script>
</body>
</html>

代码运行结果如下：