Vue初学-过滤器filter

最新推荐文章于 2024-01-31 15:54:47 发布

不会写文章的猴子

最新推荐文章于 2024-01-31 15:54:47 发布

阅读量203

点赞数 1

分类专栏： Vue 文章标签： vue 过滤器 filter

本文链接：https://blog.csdn.net/qq_41809137/article/details/105601216

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{money|contect("$")}}
        {{money|add(100)|contect("$")}}
    </div>
    <script>
        const vm=new new Vue({
            el:"#app",
            data:{
                money:100
            },
            filters: {
                add:function(value,value2){
                    return value+value2;
                },
                contect:function(value,symbol){
                    return value+symbol;
                },
            }
        });
      
    </script>
</body>
</html>

使用filters进行定义过滤器。使用过滤器语法 {{data|filter(arg)}}, data表示的是数据，|表示后面调用的是过滤器filter是过滤器的名称，过滤器的第一个参数是data，后面的参数是我们要传递到过滤器的参数。一个data也可以调用多个过滤器。

全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{money|add(100)|globalContect("@")}}
    </div>
    <script>
          Vue.filter("globalContect",function(value,symbol){
            return value+symbol;
        });
        const vm=new new Vue({
            el:"#app",
            data:{
                money:100
            },
            filters: {
                add:function(value,value2){
                    return value+value2;
                }
            }
        });
      
    </script>
</body>
</html>

全局过滤器是要将其定义在Vue下,语法 Vue.fileter(“name”,function) name是定义的过滤器的名称，function是过滤器的具体实现。

不会写文章的猴子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue初学-过滤器filter

局部过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
复制链接

扫一扫

专栏目录