vue《五》（过滤器）

最新推荐文章于 2024-03-07 17:02:12 发布

键盘哥

最新推荐文章于 2024-03-07 17:02:12 发布

阅读量205

点赞数

分类专栏： vue学习笔记文章标签： vue过滤器 vue简单入门

本文链接：https://blog.csdn.net/Gaowahaha/article/details/81085783

版权

vue学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.过滤器一般用于格式化文本，如果是多个过滤器，直接串联即可！{{msg|uppercase|addString}}

实现效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器Filters</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#test',
                data:{
                    msg:'Hello World!',
                },
                filters:{
                    uppercase:function(value){
                        if(!value) return '';
                        value = value.toString();
                        return value.toUpperCase();
                    },
                    addString:function(value){
                        if(!value) return "";
                        value=value.toString()+" filters test";
                        return value;

                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="test">
    {{msg|uppercase|addString}}
</div>
</body>
</html>

2.自定义过滤器（允许自定义参数）

样式效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器Filters</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){           
            var vm2 = new Vue({
                el:'#test2',
                data:{
                    msg:'Hello World!',
                },
                filters:{
                    addTest:function(value,a,b){
                        if(!value) return '';
                        value = value.toString();
                        return a+value+b;
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="test2">
    {{msg|addTest("start","end")}}
</div>
</body>
</html>