Vue3不再支持Filters过滤器,推荐使用计算属性来做过滤器(简单使用方法)

页面使用

{{ 定义函数(传参) }}

计算属性方法使用

computed: {
        定义函数: function() {
           
            return function(传参) {
                //处理方法逻辑
                return  回调参
            }
        }

例子处理名字显示一位
页面使用

//王小小
{{ fnNameFilter(props.row.receiverName) }}

计算属性方法使用

computed: {
        fnNameFilter: function() {
            
            return function(val) {
            //val=王小小
                if (val) {
                    let len = ''
                    for (let i = 0; i < val.length - 1; i++) {
                        len = len + '*'
                    }
                    return  val.substring(0, 1) + len
                }
                return  val
                //王**
            }
        }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
引用\[1\]:在main.js中引用了一个filters.js文件,并通过循环将其中的过滤器注册到Vue实例中。\[1\] 引用\[2\]:在一个Vue实例中定义了一个名为format的过滤器,该过滤器接受三个参数,并将参数拼接成一个字符串返回。\[2\] 引用\[3\]:在另一个Vue实例中定义了一个名为ucase的过滤器,该过滤器将传入的字符串转换为大写字母并返回。\[3\] 根据提供的引用内容,我无法找到关于vue3filters过滤器的具体信息。可能是因为引用的内容中没有提到vue3filters过滤器的相关信息。如果你有更多的信息或者具体的问题,请提供更多的上下文,我将尽力帮助你解答。 #### 引用[.reference_title] - *1* [Vuefilters过滤器的封装](https://blog.csdn.net/babyxuqian/article/details/119324717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue3 之 过滤器](https://blog.csdn.net/xybhua/article/details/128913128)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue (三) ---------- 过滤器](https://blog.csdn.net/m0_51111980/article/details/125055852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淡忘_cx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值