Vue - 过滤器

最新推荐文章于 2024-07-27 10:19:06 发布

北辰.two

最新推荐文章于 2024-07-27 10:19:06 发布

阅读量256

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53734436/article/details/121084161

版权

本文探讨Vue.js中的过滤器，包括它们的定义、使用方法以及如何传递参数和组合多个过滤器。过滤器本质上是转换值的函数，如将字符串转为大写或翻转。在Vue 3.0中，过滤器被函数所取代。文章通过实例展示了如何全局和局部定义过滤器，并解释了过滤器串联和参数传递的语法。

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

vue过滤器-定义使用

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

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

Vue中的过滤器场景 :传入一个值,得到处理后的值

字母转大写, 输入"hello", 输出"HELLO"
字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"

本质:函数 (Vue3.0 - 过滤器移除了)

语法:

在项目入口main.js文件中定义全局过滤器:

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

// 方式1: 全局 - 过滤器
// 任意的.vue文件内"直接"使用
// 语法: Vue.filter("过滤器名", 值 => 处理结果)
// Vue.filter("reverse", val => val.split("").reverse().join(""))
//一次只能定一个 所以filter
// 过滤器接参数
Vue.filter("reverse", (val, s) => {
   
  return val.split("").reverse().join(s)
})

在某个.vue文件里定义局部过滤器:

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

// 方式2: 局部 - 过滤器
  // 只能在当前vue文件内使用
//一次可以定多对 所以filters
  /*
     语法: 
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
   
    toUp (val) {
   
      return val.toUpperCase()
    }
  }