Vue2 过滤器的使用

最新推荐文章于 2024-05-27 09:53:40 发布

星星散落人间

最新推荐文章于 2024-05-27 09:53:40 发布

阅读量769

点赞数

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

本文链接：https://blog.csdn.net/future_1_/article/details/125283400

版权

vue2 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、什么是过滤器？

过滤器分为全局过滤器和局部过滤器，是对要显示的数据进行特定格式化后再显示

二、过滤器的使用特点

vue过滤器通常是用来处理数据的必须有return值
过滤器只能使用在双大括号中并且使用 | 分割 | 前为要处理的数据 |后为过滤器名称
在使用过滤器函数时，若需要给过滤器函数传参则要加小括号，若不需要传参小括号可加可不加
当全局过滤器和局部过滤器名称相同时，vue会以就近原则进行调用，也就是说局部过滤器优先于全局过滤器
过滤器可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据, 是产生新的对应的数据

1.全局过滤器

全局过滤器可在任意一个vue实例中使用

使用  {{ 要处理的数据 | 过滤器名称 }} 或  v-bind:属性 = "要处理的数据 | 过滤器名"
注册  Vue.filter("过滤器名称",function(){ 
      })

代码如下

<body>
    <div id="app">
        <h1>
            {{msg | help('天天向上','小明')}}
        </h1>
    </div>
    <div id="box">
        <h1>{{title | help("好好学习",'小红')}}</h1>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    // 创建全局过滤器
    // 参数一：过滤器名称  参数二：回调函数(参数一：将要处理的数据  参数二：形参 可以有多个形参)
    Vue.filter("help", function (text, parms, name) { //????
        console.log(text);  //好好学习 天天向上  msg + help
        console.log(parms);// 天天向上 好好学习  title + help
        console.log(name);
        return text + parms + name
    })

    new Vue({
        el: "#app",
        data: {
            msg: "好好学习"
        }
    })
    new Vue({
        el: "#box",
        data: {
            title: "天天向上"
        }
    })
</script>

2.局部过滤器

局部过滤器只能在当前vue实例中使用

fliters属性用来存放局部过滤器函数

局部过滤器函数形参为处理的数据

使用  {{ 要处理的数据 | 过滤器名称 }} 或  v-bind:属性 = "要处理的数据 | 过滤器名"
注册  new Vue{
       filters:{
       过滤器名称(属性){

       }
     }
   }

代码如下

<body>
    <div id="app">
        <h1>{{msg | filterMsg}}</h1>
        <h2>{{age | filterAge("小米")}}</h2>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好好学习天天向上",
            age: 19
        },
        // fliters属性用来存放 局部过滤器函数
        filters: {
            // 局部过滤器函数  形参为处理的数据
            filterMsg(text) {
                // 将字符串分割成数组
                return text.split("").reverse().join("")
                // reverse() 将数组倒序排列
                // join("") 将数组拼接成字符串
            },
            filterAge(text, name) {
                if (text > 18) {
                    return name + "成年"
                } else {
                    return name + "未成年"
                }
            }
        }
    })
</script>