Vue中过滤器的使用

最新推荐文章于 2022-03-17 16:47:20 发布

兔子吃萝卜*

最新推荐文章于 2022-03-17 16:47:20 发布

阅读量359

点赞数 1

分类专栏： Vue知识点文章标签：前端 Vue

本文链接：https://blog.csdn.net/llllllol/article/details/98762934

版权

Vue知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

过滤器

概念：
Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(" | ")；
分类：过滤器分为全局过滤器和局部过滤器

					过滤器的语法
					//声明过滤器
			        Vue.filter('过滤器名称','回调函数')

1，简单的过滤器使用

			<!DOCTYPE html>
			<html lang="en">
			
			<head>
			    <meta charset="UTF-8">
			    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			    <meta http-equiv="X-UA-Compatible" content="ie=edge">
			    <title>Document</title>
			    <script src="../day07/lib/vue.js"></script>
			</head>
			
			<body>
			
			    <div id="app">
			        <p>{{msg}}</p>
			    </div>
			
			    <script>
			        var vu = new Vue({
			            el: '#app',
			            data: {
			                msg: '你的LOL打的真厉害啊~~~LOL'
			            },
			            methods: {
			
			            }
			        })
			
			    </script>
			
			</body>
			
			</html>

	添加一个过滤器将 msg中的LOL替换成  "英雄联盟"

		<div id="app">
		        <p>{{msg}}</p>
		        <!-- 通过管道符 使用自定义的过滤器 -->
		        <p>{{msg | msgf }}</p>
		    </div>
		
		    <script>
		        // 创建一个过滤器
		          Vue.filter('msgf',function(msg){
		                return msg.replace('LOL','英雄联盟')
		            })
		        var vu = new Vue({
		            el: '#app',
		            data: {
		                msg: '你的LOL打的真厉害啊~~~LOL'
		            },
		            methods: {
		
		            }
		        })
		
		    </script>

我们发现这时候只有一个关键字被替换了，另外一个没变，这时候我们可以通过正则表达式来处理

// 创建一个过滤器    /g 表示该表达式可以进行全局匹配。
          Vue.filter('msgf',function(msg){
                return msg.replace(/LOL/g,'英雄联盟') 
            })
        var vu = new Vue({
            el: '#app',
            data: {
                msg: '你的LOL打的真厉害啊~~~LOL'
            },
            methods: {

            }
        })

2，什么是全局过滤器

接下来我们看看什么是全局过滤器，其实我们上面定义的过滤器就是全局过滤器，我们在页面中再增加一个div和一个Vue对象

			    <div id="app">
			        <p>{{msg}}</p>
			        <!-- 通过管道符 使用自定义的过滤器 -->
			        <p>{{msg | msgf }}</p>
			    </div>
			
			    <div id="app2">
			        <p>{{msg2}}</p>
			        <!-- 通过管道符 使用自定义的过滤器 -->
			        <p>{{msg2 | msgf }}</p>
			    </div>
			    <script>
			        // 创建一个过滤器    /g 表示该表达式可以进行全局匹配。
			        Vue.filter('msgf', function (msg) {
			            return msg.replace(/LOL/g, '英雄联盟')
			        })
			        var vu = new Vue({
			            el: '#app',
			            data: {
			                msg: '你的LOL打的真厉害啊~~~LOL'
			            },
			            methods: {
			
			            }
			        })
			        var vu2 = new Vue({
			            el: '#app2',
			            data: {
			                msg2: 'LOL真好玩，很喜欢玩LOL，每天下班打两把LOL'
			            },
			            methods: {
			
			            }
			        })

通过以上效果我们也能看出来什么是全局的过滤器了，其实就是我们定义的过滤器可以被本页面中的多个Vue对象所使用。

3，局部过滤器

相对于全局过滤器来说，局部过滤器就是只能够定义这个过滤器的Vue对象可以使用，具体步骤如下:
在这里插入图片描述
使用局部过滤器和前面是一样的

打印结果

通过页面效果我们发现在vu对象中定义的过滤器在vu2中绑定的div中是不可以使用的，只能在定义的Vue对象绑定的div中使用，这就是局部变量。
注意：如果全局过滤器和局部过滤器同名的情况话，会通过就近原则调用局部过滤器！