vue过滤器-传参

最新推荐文章于 2024-09-05 13:30:00 发布

Henry_ww

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Henry_ID/article/details/118656657

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js中如何创建并使用过滤器，特别是在过滤器中传参以及如何同时应用多个过滤器。通过示例代码展示了如何在模板中通过`|`操作符将数据传递给过滤器，并在过滤器内部处理参数，实现字符串翻转等操作。这对于理解和提升Vue应用中的数据格式化能力非常有帮助。

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

vue过滤器-传参

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

语法:
- 过滤器传参: vue变量 | 过滤器(实参)

<template>
  <div>
 <!-- 1.传一个 - 过去 -->
    <p> {{ msg | fan('-') }}</p>
   
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello'
    }
  },
  filters: {
    // str：第一个参数是固定的，是数据本身msg
    // 2.从第二个开始接受的就是具体的参数，这里用 s 接收
    // 3.调用join(s)  
    // 这里可以设一个默认值为：'',没传参就是''(空字符串)，传了就用你传的具体值
  fan:(str,s='') => { return str.split('').reverse().join(s)}
  }
}
</script>

<style>

</style>