Vue过滤器

小咪咪 2024-04-17 05:46 64阅读 0赞

# Vue过滤器 #

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 `v-bind` 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{
       { message | capitalize }}
    
    
    <div v-bind:id="rawId | formatId"></div>
    你可以在一个组件的选项中定义本地的过滤器：

filters: { 
      capitalize: function (value) { 
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) { 
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    
    new Vue({ 
      // ...
    })

当全局过滤器和局部过滤器重名时，会采用局部过滤器。  
下面这个例子用到了 `capitalize` 过滤器：  
  过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。  
过滤器可以串联：

{ {  message | filterA | filterB }}

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

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

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过滤器

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

小咪咪/ 2024年04月17日 05:46/ 0 赞/ 65 阅读

相关 vue【过滤器】

目录 1：过滤器的基本语法 1.1：示例代码 1.2：注意事项 2：使用Vue.filter定义全局过滤器 2.1：私有过滤器 2.2：全局过滤器 3：使用全局过

不念不忘少年蓝@/ 2023年10月13日 11:46/ 0 赞/ 37 阅读

相关 vue 过滤器

1.是什么？ > 本质就是一个函数，特别适合来做格式转换，如把一个标准时间转成相对时间。主要分为局部过滤器和全局过滤器，局部比较简单，重点说明在vue全局中使用过滤器

本是古典何须时尚/ 2023年10月04日 15:51/ 0 赞/ 41 阅读

相关 Vue 过滤器

什么是过滤器？在哪使用？全局过滤器局部过滤器（组件过滤器）注意使用方法

谁借莪１个温暖的怀抱￠/ 2023年07月21日 05:43/ 0 赞/ 124 阅读

相关 vue 过滤器

vue 过滤器 1 关于 vue 过滤器 > 在vue1.0的时候其实是内置了过滤器的，但是考虑到好多过滤器并不一定会被开发所调用，所以把原本内置的过滤器就给去掉了

妖狐艹你老母/ 2022年11月26日 08:43/ 0 赞/ 184 阅读

相关 vue 编写过滤器

1、起一个 filters.js 文件，编写过过滤器，然后 export 出去，如以下代码 let money = value=>{ return '￥'

拼搏现实的明天。/ 2022年05月28日 01:45/ 0 赞/ 204 阅读

相关 vue：过滤器

一、过滤器过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器

亦凉/ 2022年03月27日 07:26/ 0 赞/ 287 阅读

相关 Vue过滤器

在了解过滤器之前，我们需要明确一个概念--过滤器，本质上都是函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js与AngularJS中的过滤器语法有

比眉伴天荒/ 2021年12月22日 11:17/ 0 赞/ 381 阅读

相关 vue 过滤器

vue 有时候要改变date里的数据为大写，一般采用方法，但是方法不能缓存，计算属性要重新设置值，过滤器改变数据展示，但是不该变原始数据过滤器有全局过滤器和局部过滤器代

我会带着你远行/ 2021年12月12日 08:47/ 0 赞/ 306 阅读

相关 vue过滤器

过滤数据是我们日常开发中必然会用到的。常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。

╰+攻爆jí腚メ/ 2021年08月28日 11:52/ 0 赞/ 485 阅读