Vue中的过滤器(filter)详解

目录
  • 过滤器使用位置
  • 全局过滤器、局部过滤器
    • 全局过滤器：
    • 局部过滤器：
  • 过滤器中传入多个参数：
  • 多个过滤器串联：

官方文档：https://cn.vuejs.org/v2/guide/filters.html

在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）

个人觉得称它为加工车间会更加贴切一些，过滤器可以用来筛选出符合条件的，丢弃不符合条件的；加工车间既可以筛选，又可以对筛选出来的进行加工。

过滤器使用位置

过滤器可以用在两个地方：双花括号插值和 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中的过滤器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

  • 解决vue过滤器filters获取不到this对象的问题

    目录 vue过滤器filters获取不到this对象 原理 下面举个例子 Vue filters this指向问题 Vue实例中filter不依赖于当前vue实例上下文 vue过滤器filters获取不到this对象 原理 在data中定义一个属性that,把this存储到that中 在调用filters中的方法sum的时候将that传进去即可 下面举个例子 用filters计算data中 a+b 的值 注意:filters中的sum方法的第一个参数是|左边那个a,第二个参数才是括号写的that

  • Vue 过滤器filters及基本用法

    Vue 过滤器filters及基本用法

    1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat

  • 在Vue methods中调用filters里的过滤器实例

    需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器, 网友hongz1125提出的解决办法: this.$options.filters[filter](...args) //这种方法很简单,也很实用 下面是我的方法,有点复杂.建议使用上面网友说的方法. filters: { formatScore(score) { if (score < 20) { score = '不合格'; } else if (score >= 20 &&

  • Vue过滤器（filter）实现及应用场景详解

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

    1. 简单介绍 Vue.js 允许你自定义过滤器(filter),可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ message | filter }} <!-- 在 `v-bind` 中 --> <div v-bind:msg="message |

  • 如何使用vue过滤器filter

    概述 在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器. 关于 vue 过滤器,在官方文档中是这样说明的: Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示. 即过滤器是用来格式化数据的一个函数.过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进

  • Vue3不支持Filters过滤器的问题

    filters过滤器已从Vue 3.0中删除,不再支持. 2.x 语法 在2.x中,开发人员可以使用过滤器来处理常见的文本格式. <template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p> </template> <script> export default { props: { accountBalance: {

  • Vue中的过滤器(filter)详解

    目录 过滤器使用位置 全局过滤器.局部过滤器 全局过滤器: 局部过滤器: 过滤器中传入多个参数: 多个过滤器串联: 官方文档:https://cn.vuejs.org/v2/guide/filters.html 在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化.(也就是修饰文本,但是文本内容不会改变) 个人觉得称它为加工车间会更加贴切一些,过滤器可以用来筛选出符合条件的,丢弃不符合条件的:加工车间既可以筛选,又可以对筛选出来的进行加工.

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

随机推荐