06 vue -过滤器

最新推荐文章于 2024-09-30 16:19:08 发布

喵喵酱仔__

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量46

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_38210427/article/details/129387797

版权

vue基本知识专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章介绍了Vue中的过滤器功能，包括什么是过滤器（纯函数，用于文本格式化），如何创建全局和局部过滤器，以及如何在模板中使用过滤器进行数据转换。还提供了一个时间格式化的案例，并展示了如何给过滤器传参和使用多个过滤器的语法。

摘要由CSDN通过智能技术生成

1概念

一、是什么

过滤器（filter）是输送介质管道上不可缺少的一种装置,就是把一些不必要的东西过滤掉，过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。Vue 允许你自定义过滤器，可被用于一些常见的文本格式化。（Vue3中已废弃filter）

二使用

目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

过滤器只能用在, 插值表达式和v-bind表达式

两种使用语法:

Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})

filters: {过滤器名字: (值) => {return “返回处理后的值”}

2.1 全局过滤器

1 首先再main.js中进行定义全局过滤器

2 进行使用

2.2 局部过滤器

再该vue 中进行定义

三案例

对时间进行格式化：用过滤

四vue过滤器-传参和多过滤器

目标: 可同时使用多个过滤器, 或者给过滤器传参

语法:
过滤器传参: vue变量 | 过滤器(实参)
多个过滤器: vue变量 | 过滤器1 | 过滤器2

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>
<style>
</style>