欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue学习之路第十七篇:过滤器的使用

程序员文章站 2022-04-24 18:27:14
1、过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号(“|”)指示。使用方式为:{{ msg | form ......

1、过滤器

①:vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 javascript 表达式的尾部,由“管道”符号(“|”)指示。使用方式为:{{ msg | formatmsg}},其中msg为要被过滤的文本,formatmsg为过滤器名称。

②:过滤器的定义方式:

vue.filter('formatmsg',function(msg){//对data数据进行处理的方法体});

这里定义了一个名为formatmsg的过滤器,过滤器的第一个参数为过滤器的名称;第二个参数为过滤方法,方法参数是要被过滤的文本,即管道符号前面的数据。

2、看简单例子:
<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>

    <script type="text/javascript">

        var vm = new vue({
            el:"#app",
            data:{
                msg:'曾经小小少年,有小小的梦,小小的开始,小小的进步,小小的实现'
            },
            methods:{}
        });
    </script>
</body>

这里只是在页面简单的展示了msg定义的数据。现在我们要使用过滤器把msg里文本为“小小”的字符串替换为“大大”。

    <div id="app">
        <p>{{ msg | formatmsg }}</p>
    </div>

页面上调用名字为formatmsg的过滤器

 //定义过滤器
vue.filter('formatmsg',function(msg){
       return msg.replace(/小小/g,'大大');
});

这里定义了名称为formatmsg的过滤器,过滤器中调用replace方法把“小小”替换为“大大”。运行结果如下:

Vue学习之路第十七篇:过滤器的使用

3、过滤器还可以添加任意多个参数

   <div id="app">
        <p>{{ msg | formatmsg('超级','大大') }}</p>
    </div>

这里过滤器有两个参数,那么在定义过滤器时,应该在相对应的过滤方法中展示对应的参数:

    vue.filter('formatmsg',function(msg,arg1,arg2){
         return msg.replace(/小小/g,arg1 + arg2);
    });

这里过滤方法中的第一个参数为需要过滤的文本,后面的参数为过滤器调用时带的参数。运行结果如下:

Vue学习之路第十七篇:过滤器的使用

 

每天进步一点点!