vue过滤器

vue过滤器

分类：

1、单个组件的过滤器，也叫局部过滤器

2、vue实例全局的过滤器，它可以被应用在任何地方

使用位置：

1、{{message | filterA}}双括号插值内

2、<h1 v-bind:id="message | filterA">{{message}}</h1> v-bind绑定的值的地方

使用多个过滤器：（依次执行）

{{message | filterA | filterB}}这个例子中会把message的值当做参数传入A过滤器进行过滤，A过滤器过滤完的数据返回值会传入B过滤器

全局过滤器：

vue.filter("过滤器名称"，函数)；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <script src="js/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app1">
10             <h1>我是app1：{{message | upperCase}}</h1>
11         </div>
12         <div id="app2">
13             <h1>我是app2：{{message | upperCase}}</h1>
14         </div>
15     </body>
16 
17     <script>
18         //定义全局过滤器
19         Vue.filter("upperCase",function (value) {
20             if (!value) return "";
21             value = value.toString();
22             //字符转换成大写
23             return value.toUpperCase();
24         })
25         let vm = new Vue({
26             el: "#app1",
27             data: {
28                 message: "HelloWorld"
29             }
30         });
31         let vm2 = new Vue({
32            el: "#app2",
33            data:{
34                message: "hahahaha"
35            }
36         });
37     </script>
38 </html>

局部过滤器：

定义局部的过滤器

定义格式：filters：{过滤器名称：函数}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <script src="js/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app3">
10             <component-a :msg="message"></component-a>
11         </div>
12     </body>
13     <template id="my-temlate-1">
14         <h3>我是子组件，使用了局部过滤器{{msg | capitalize}}</h3>
15     </template>
16     <script>
17         var componentA = {
18             props:["msg"],
19             template:`#my-temlate-1`,
20             filters:{
21                 capitalize:function (value) {
22                     if (!value) return "";
23                     value = value.toString();
24                     value = value.charAt(0).toUpperCase()+value.substring(1);
25                     return value;
26                 }
27             }
28         }
29         let vm3 = new Vue({
30             el: "#app3",
31             data:{
32                 message: "dddd"
33             },
34             components: {
35                 "component-a":componentA  //注册局部组件
36             }
37         });
38     </script>
39 </html>
posted @ 2022-05-23 18:25  ~晶晶~  阅读(82)  评论(0)  编辑  收藏  举报