Vue过滤器及computed属性

最新推荐文章于 2025-04-09 14:15:04 发布

小白学习日记

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量605

点赞数

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

本文链接：https://blog.youkuaiyun.com/m0_46533814/article/details/122874875

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了Vue3.x版本中过滤器的移除情况，以及如何使用computed属性来替代内置的`uppercase`、`lowercase`和`capitalize`过滤器。通过示例代码展示了如何在Vue3应用中实现首字母大写、全大写和全小写的功能。

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

过滤器
过滤器，本质上也是函数，作用：在于用户输入数据后，可以进行处理，并返回一个数据结果，vue3.x之前存在，3.x移除了过滤器，使用computed代替
在这里插入图片描述

过滤器写法

过滤器语法：使用管道符“|”进行连接
eg：

{{'abc' | uppercase}}
//'abc'-->'ABC'
{{'abc' | capitalize}}
//'abc'--->Abc
{{'ABC' | lowercase}}
//'ABC'--->'abc'

内置过滤器
在这里插入图片描述

computed实现字母操作

capitalize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{capitalize}}
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'abc'
        },
        computed: {
            //首字母大写
            capitalize: function (){
                let str = this.message.substr(0,1).toUpperCase();
                return str+this.message.substr(1,this.message.length-1);
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述
因为我使用了3.x版本，是没有这些个处理字母的过滤器，就自己使用computed实现
uppercase/lowercase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{up}}
    {{lw}}
    {{hu}}
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'abc',
            word: 'ABC'
        },
        computed: {
            //转大写
            up: function (){
                return this.message.toUpperCase();
            },
            //小写
            lw: function (){
                return this.word.toLowerCase();
            },
            //首字母大写
            hu: function (){
                let str = this.message.substr(0,1).toUpperCase();
                return str+this.message.substr(1,this.message.length-1);
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述