Vue.js学习 Item14 – 过滤器与自定义过滤器

桃扇骨 2022-07-21 01:16 230阅读 0赞

## 基础 ##

类似于自定义指令，可以用全局方法 `Vue.filter()` 注册一个自定义过滤器，它接收两个参数：**过滤器 ID** 和**过滤器函数**。过滤器函数以值为参数，返回转换后的值：

Vue.filter('reverse', function (value) { 
      return value.split('').reverse().join('')
    })

<span v-text="message | reverse"></span>

过滤器函数可以接收任意数量的参数：

Vue.filter('wrap', function (value, begin, end) { 
      return begin + value + end
    })

<span v-text="message | wrap 'before' 'after'"></span>

## 双向过滤器 ##

目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器，在把来自视图（`<input>` 元素）的值写回模型之前转化它：

Vue.filter('currencyDisplay', {
      // model -> view
      // 在更新 `<input>` 元素之前格式化值
      read: function(val) { 
        return '$'+val.toFixed(2)
      },
      // view -> model
      // 在写回数据之前格式化值
      write: function(val, oldVal) { 
        var number = +val.replace(/[^\d.]/g, '')
        return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
      }
    })

## 动态参数 ##

如果过滤器参数没有用引号包起来，则它会在当前 vm 作用域内动态计算。另外，过滤器函数的 `this` 始终指向调用它的 vm。例如：

<input v-model="userInput">
    <span>{
       {msg | concat userInput}}</span>

Vue.filter('concat', function (value, input) { 
      // `input` === `this.userInput`
      return value + input
    })

上例比较简单，也可以用表达式达到相同的结果，但是对于更复杂的逻辑——需要多于一个语句，这时需要将它放到计算属性或自定义过滤器中。

内置过滤器 `filterBy` 和 `orderBy`，根据所属 Vue 实例的当前状态，过滤/排序传入的数组。

发表评论取消回复

表情：

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

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

相关阅读

相关自定义过滤器和全局过滤器

1. 过滤器中必须有返回值 2. 一般使用花括号`{ {}}`插值，管道符前是要过滤的元素，管道符之后是过滤方法 <p>{ { arr|sortArray}}</

Love The Way You Lie/ 2023年05月30日 06:17/ 0 赞/ 49 阅读

相关自定义私有过滤器

全局过滤器：指的是所有的vm实例（vm1、vm2、...）都能共享的过滤器。 ![1190185-20190520094708381-274914587.png][]

╰半夏微凉°/ 2022年10月02日 14:56/ 0 赞/ 204 阅读

相关 Shiro--自定义过滤器

原文网址：[Shiro--自定义过滤器\_IT利刃出鞘的博客-CSDN博客\_shiro自定义过滤器][Shiro--_IT_-CSDN_shiro] 其他网址或关

悠悠/ 2022年09月04日 07:57/ 0 赞/ 296 阅读

相关自定义过滤器

package com.kuang.filter; import javax.servlet.; import javax.servlet.h

àì夳堔傛蜴生んèń/ 2022年08月29日 10:05/ 0 赞/ 292 阅读

相关 Vue.js学习 Item14 – 过滤器与自定义过滤器

基础类似于自定义指令，可以用全局方法 `Vue.filter()` 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的

桃扇骨/ 2022年07月21日 01:16/ 0 赞/ 231 阅读

相关 AngularJs自定义过滤器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

傷城~/ 2022年07月12日 07:10/ 0 赞/ 288 阅读

相关自定义过滤器

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

柔光的暖阳◎/ 2022年06月02日 11:10/ 0 赞/ 246 阅读

相关 flask自定义过滤器

解决：自带的过滤器不能满足我们的需求，一般在if条件中使用例如：列表反转，不能使用reverse过滤器，需要自定义现在视图函数中定义一个过滤器（参数就是模板文件中

我就是我/ 2022年04月25日 08:46/ 0 赞/ 286 阅读

相关 Django过滤器与自定义标签

Django自定义标签 \{ \{变量\}\} \{%标签%\} | 过滤符 1、创建APP ![watermark_type_ZmFuZ3poZW5naGVpd

小灰灰/ 2022年04月23日 21:22/ 0 赞/ 238 阅读

相关 AngularJS过滤器以及自定义过滤器

过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。一.AngularJS的filter过滤器向表达式添加过滤器：可以通过

Bertha 。/ 2021年09月14日 06:54/ 0 赞/ 509 阅读