Vue中的过滤器(filter)详解

Vue中的过滤器 Vue filter过滤器 vue filter 2022-11-13 19:11:31 726人浏览泡泡鱼

摘要

目录过滤器使用位置全局过滤器、局部过滤器全局过滤器：局部过滤器：过滤器中传入多个参数：多个过滤器串联：官方文档：https://cn.Vuejs.org/v2/guide

过滤器使用位置

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

示例：

<template>
  <div class="test">
    <div :id="rawId">{{rawId}}</div>
    <!-- 以下v-bind可省略，即v-bind:id可简写为:id -->
    <div v-bind:id="rawId|filter_fORMatId">{{rawId|filter_formatId}}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      rawId: 1
    };
  },
  filters: {
    filter_formatId(value) {
      return value * 10;
    }
  }
};
</script>
 
<style lang="sCSS" scoped>
.test {
  color: black;
}
</style>

全局过滤器、局部过滤器

全局过滤器：

在main.js中写入：

Vue.filter('filter_addPricePrefix', function (value) {
  return "¥" + value;
})

局部过滤器：

在vue示例中写入：

<template>
  <div class="test">
    <p>{{price}}</p>
    <p>{{price | filter_addPricePrefix}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter_addPricePrefix(value) {
      return "¥" + value;
    }
  }
};
</script>
 
<style lang="scss" scoped>
.test {
  color: black;
}
</style>

过滤器中传入多个参数：

过滤器是 javascript 函数，因此可以接收参数：

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

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

<template>
  <div class="test">
    <!-- 要过滤的数据，永远是第一个参数；通过filter函数，传递的参数，依次排在后面。 -->
    <p>{{ new Date() | filter_dateFormat }}</p>
    <p>{{ new Date() | filter_dateFormat('YYYY-MM-DD') }}</p>
    <p>{{ new Date() | filter_dateFormat('YYYY-MM-DD', count) }}</p>
  </div>
</template>
<script src="Https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script>
export default {
  data() {
    return {
      count: 10
    };
  },
  filters: {
    filter_dateFormat(date, format, count) {
      return (
        moment(date).format(format || "YYYY-MM-DD HH:mm:ss") +
        (count ? " -- " + count : "")
      );
    }
  }
};
</script>
 
<style lang="scss" scoped>
.test {
  color: black;
}
</style>

多个过滤器串联：

{{ message | filterA | filterB }}

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

<template>
  <div class="test">
    <p>{{price}}</p>
    <p>{{price | filter_addPricePrefix}}</p>
    <p>{{price | filter_addPricePrefix |filter_addPriceSuffix}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter_addPricePrefix(value) {
      return "¥" + value;
    },
    filter_addPriceSuffix(value) {
      return value + "元";
    }
  }
};
</script>
 
<style lang="scss" scoped>
.test {
  color: black;
}
</style>

注意：

过滤器中通过this是获取不到vue实例的！！！在其中发起http请求也会失败，因此，为了获取后台数据，我们可以在mounted中先获取tableData，然后，把这个tableData作为过滤器的第二个参数进行传递！！！！

到此这篇关于Vue中的过滤器（filter）的文章就介绍到这了,更多相关Vue中的过滤器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue中的过滤器(filter)详解

本文链接: https://www.lsjlt.com/news/170929.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue中的过滤器(filter)详解

目录过滤器使用位置全局过滤器、局部过滤器全局过滤器：局部过滤器：过滤器中传入多个参数：多个过滤器串联：官方文档：https://cn.vuejs.org/v2/guide...

99+

2022-11-13

Vue中的过滤器 Vue filter过滤器 vue filter
详解JavaWeb中的过滤器Filter

目录一、什么是过滤器1.1 使用步骤二、初体验2.1 mynav.html2.2 FilterServlet程序2.3 HelloServlet程序2.4 web.xml2.5 in...

99+

2022-11-12
Java过滤器Filter详解

目录Filter学习Filter功能Filter的工作原理多个Filter的实现Filter的执行逻辑总结Filter学习 Filter功能拦截jsp、静态图片文件、静态html资源文件实现URL级别的权限访问控制 ...

99+

2019-04-25

Java过滤器 Filter
详解Servlet之过滤器（Filter）

过滤器1.为什么使用它？有很多全站性的东西需要处理，例如乱码问题，通过过滤器统一进行过滤更简单2.有什么用？实现用户在访问某个目标资源之前，对访问的请求和响应进行拦截。简单说，就是可以实现web容器对某资源的访问前截获进行相关的处理，还可以...

99+

2023-05-31

servlet 过滤器滤器
servlet过滤器(Filter)详解（九）

本文实例为大家分享了servlet过滤器的具体代码，供大家参考，具体内容如下1.servlet过滤器产生背景　　项目中我们会遇到这样一类的需求，对访问服务器的用户ip实施过滤，只有在允许名单中的ip才能访问服务，为了实现需求，每当有客户端请...

99+

2023-05-31

servlet 过滤器 filter
JavaWeb中过滤器Filter的用法详解

目录过滤器Filter处理顺序使用场景自定义过滤器源码分析FilterDefFilterMap初始化过滤器创建过滤器链 ApplicationFilterChain执行过滤器链过滤器...

99+

2022-11-13

JavaWeb 过滤器 JavaWeb Filter JavaWeb 过滤器Filter
一文详解JavaWeb过滤器(Filter)

目录基本介绍过滤器(Filter)接口使用过滤器(Filter)创建过滤器(Fliter)使用过滤器(Filter)配置过滤器(Filter)拦截路径注解方式xml方式&...

99+

2023-05-19

Java 过滤器 Java Filter
HBase Filter 过滤器之RowFilter详解

前言：本文详细介绍了HBase RowFilter过滤器Java&Shell API的使用，并贴出了相关示例代码以供参考。RowFilter 基于行键进行过滤，在工作中涉及到需要通过HBase Rowkey进行数据过滤时可以考虑使...

99+

2017-12-16

HBase Filter 过滤器之RowFilter详解
HBase Filter 过滤器之FamilyFilter详解

前言：本文详细介绍了 HBase FamilyFilter 过滤器 Java&Shell API 的使用，并贴出了相关示例代码以供参考。FamilyFilter 基于列族进行过滤，在工作中涉及到需要通过HBase 列族进行数据过滤...

99+

2017-01-24

HBase Filter 过滤器之FamilyFilter详解
HBase Filter 过滤器之QualifierFilter详解

前言：本文详细介绍了 HBase QualifierFilter 过滤器 Java&Shell API 的使用，并贴出了相关示例代码以供参考。QualifierFilter 基于列名进行过滤，在工作中涉及到需要通过HBase 列名...

99+

2014-11-14

HBase Filter 过滤器之QualifierFilter详解
HBase Filter 过滤器之 ValueFilter 详解

前言：本文详细介绍了 HBase ValueFilter 过滤器 Java&Shell API 的使用，并贴出了相关示例代码以供参考。ValueFilter 基于列值进行过滤，在工作中涉及到需要通过HBase 列值进行数据过滤时可...

99+

2017-12-24

HBase Filter 过滤器之 ValueFilter 详解
HBase Filter 过滤器之 DependentColumnFilter 详解

前言：本文详细介绍了 HBase DependentColumnFilter 过滤器 Java&Shell API 的使用，并贴出了相关示例代码以供参考。DependentColumnFilter 也称参考列过滤器，是一种允许用户...

99+

2022-03-14

HBase Filter 过滤器之 DependentColumnFilter 详解
Vue过滤器（filter）实现及应用场景详解

1. 简单介绍 Vue.js 允许你自定义过滤器(filter)，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0...

99+

2022-11-12
vue中过滤器filter怎么用

这篇文章主要为大家展示了“vue中过滤器filter怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中过滤器filter怎么用”这篇文章吧。示例<...

99+

2022-10-19
详解JavaWeb过滤器Filter问题解决

目录基本概念1.过滤器概述2.使用过滤器解决中文编码异常问题3.使用过滤器实现用户登录权限拦截基本概念 1、 Filter 过滤器它是 JavaWeb 的三大组件之一。三大组件分别...

99+

2022-11-13

javaweb filter过滤器 javaweb 过滤器
Filter过滤器和Listener监听器详解

Filter过滤器和Listener监听器详解Filter过滤器Filter的简介对资源的访问进行过滤，相当于小区的保安，进去要检查，出去还要检查。Filter的使用编写一个类，继承并实现javax.servlet.Filte...

99+

2023-05-31

filter 过滤器 listener
PHP伪协议filter详解，php://filter协议过滤器

「作者主页」：士别三日wyx 「作者简介」：CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者「推荐专栏」：对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 ...

99+

2023-08-31

php 网络安全人工智能 ai
详解Vue的数据及事件绑定和filter过滤器

目录Vue数据绑定单向绑定双向绑定值绑定事件绑定事件处理器事件修饰符键值修饰符 class与style绑定绑定class绑定内联样式filter过滤器总结Vue...

99+

2022-11-12
java过滤器中Filter的ChainFilter过滤链

在Java过滤器中，FilterChain是一种过滤链，用于按照一定顺序依次调用多个过滤器对请求进行处理。FilterChain接口定义了一个doFilter方法，该方法接受ServletRequest和ServletResponse作...

99+

2023-08-11

java
SpringBoot过滤器Filter使用实例详解

目录简介用法功能实现简介过滤器是AOP（面向切面编程）思想的具体实现。可以过滤浏览器发出的请求，并且决定放行请求还是中断请求。在浏览器对服务器发起请求或者服务器对浏览器响应，都会...

99+

2022-11-13