Vue教程08(过滤器的使用)
本文我们来介绍下Vue中的过滤器的使用
过滤器
概念： 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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:"今日NBA,保罗换威少,哈哈...NBA新闻真多，大家一起关注NBA..."
},
methods: {
}
})
</script>
</body>
</html>
在这里插入图片描述
添加一个过滤器来将msg中的"NBA",替换为 “美国篮球联盟”
在这里插入图片描述
在这里插入图片描述
我们发现这时候只有一个关键字被替换了，其他两个没变，这时候我们可以通过正则表达式来处理
在这里插入图片描述
在这里插入图片描述
这时我们看到实现了我们需要的效果了
2.过滤器传参数
在通过管道符号来使用过滤器的时候我们还可以传递参数过去，如下
在这里插入图片描述
在这里插入图片描述
传值效果实现了。
3.多个过滤器同时使用
我们对一个信息处理的时候，可以同时使用多个管道符来调用多个过滤器来处理，如下
在这里插入图片描述
页面效果
在这里插入图片描述
4.何为全局过滤器
接下来我们看看什么是全局过滤器，其实我们上面定义的过滤器就是全局过滤器，我们在页面中再增加一个div和一个Vue对象，
在这里插入图片描述
在这里插入图片描述
然后我们在第二个div中使用我们前面定义的过滤器来看看
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
通过以上效果我们也能看出来什么是全局的过滤器了，其实就是我们定义的过滤器可以被本页面中的多个Vue对象所使用
局部过滤器
相对于全局过滤器来说，局部过滤器就是只能够定义这个过滤器的Vue对象可以使用，具体步骤如下:
在这里插入图片描述
使用局部过滤器和前面是一样的
在这里插入图片描述
在这里插入图片描述
通过页面效果我们发现在vm对象中定义的过滤器在vm2中绑定的div中是不可以使用的，只能在定义的Vue对象绑定的div中使用，这就是局部变量。 注意：如果全局过滤器和局部过滤器同名的情况话，会通过就近原则调用局部过滤器！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年07月12日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录