vue过滤器 filter

本文详细介绍了Vue.js中的过滤器,包括如何定义全局和局部过滤器,以及如何在模板中使用它们来转换数据格式。例如,通过`reverse`过滤器实现字符串反转,`toUp`过滤器实现字符串转大写。过滤器可以接受参数并串联使用,提供了一种灵活的数据格式化方式。在Vue3中,过滤器被函数组件所替代。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue过滤器-定义使用

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

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

语法:

  • VUE.filter(“过滤器名”,(值) =>{return "返回处理后的函数的值"}) 
  • filters:{过滤器的名字:(值)=>{return "返回处理后的值"}}

全局过滤器写在  main.js

局部过滤器写在  App.vue 的exprot default 里面

<template>
  <div>
    <p>原来的样子:{{ msg }}</p>
    <p>翻转后:{{ msg | reverse }}</p>
    <p>大写:{{ msg | toUp }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },
  // 局部过滤器
  filters: {
    toUp(val) {
      return val.toUpperCase();
    },
  },
};
</script>

<style>
</style>

//main.js 里面
// 全局过滤器
Vue.filter('reverse',  (value) =>{
  return value.split('').reverse().join('')
 
})

 把值转成另一种形式, 使用过滤器, Vue3用函数替代了过滤器.

全局注册最好在main.js中注册,一处注册到处使用

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

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

 语法:

  • 过滤器传参:vue变量 | 过滤器(实参)
  • 多个过滤器: vue变量 | 过滤器1 | 过滤器2
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值