Vue （第4篇教程 Vue.filter过滤器）

最新推荐文章于 2024-07-04 10:07:27 发布

一只程序猿小白

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量676

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_42540989/article/details/99583617

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1、过滤器：

vue 官方文档这样说：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.filter</title>
</head>
<body>
   <div id="app">
     <input type="text" v-model="name">
     <p>{{name}}</p>
     <p>{{name | msgFilterName}}</p>
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
		//首先创建一个过滤器    
    //Vue.filter("",function(){})     两个参数，第一个是过滤器的名字，第二个是回调函数
	Vue.filter("msgFilterName",function(name){
		return name.replace("web前端工程师","Java开发工程师")
	});

	var vm = new Vue({
		el:'#app',
		data:{
			name:'hello,web前端工程师'
		}
	})

</script>
</html>

此时，web 前端工程师已被替换成Java开发工程师。

2、局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.filter 局部过滤器</title>
</head>
<body>
   <div id="app">
     <p>{{name}}</p>
     <p>{{name | FilterName}}</p>
   </div>

   <div id="app1">
     <p>{{name1}}</p>
     <p>{{name1 | FilterName}}</p>
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

	var vm = new Vue({
		el:'#app',
		data:{
			name:'hello,web前端工程师'
		},
		filters:{
			FilterName:function (name) {
				return name.replace("hello","你好")
			}
 
		}
	});

	var vm1 = new Vue({
		el:'#app1',
		data:{
			name1:'hello,web前端工程师'
		}
	})

</script>
</html>

此时我们发现：在vm对象中定义的过滤器在vm1中绑定的div中是不可以使用的，只能在定义的Vue对象绑定的div中使用，这就是局部过滤。

3、全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.filter 全局过滤器</title>
</head>
<style>
	#app1 p{
		color:red;
	}
</style>
<body>
   <div id="app">
     <p>{{name}}</p>
     <p>{{name | msgFilterName}}</p>
   </div>
   <div id="app1">
     <p>{{name1}}</p>
     <p>{{name1 | msgFilterName}}</p>
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//首先创建一个过滤器    
    //Vue.filter("",function(){})     两个参数，第一个是过滤器的名字，第二个是回调函数
	Vue.filter("msgFilterName",function(name){
		return name.replace("web前端工程师","Java开发工程师"+"我是全局过滤器")
	});

	var vm = new Vue({
		el:'#app',
		data:{
			name:'hello,web前端工程师，我是第一个vue对象'
		}
	});
	var vm1 = new Vue({
		el:'#app1',
		data:{
			name1:'hello,web前端工程师,我是第二个vue对象'
		}
	})

</script>
</html>

此时我们定义的过滤器在vm对象中以及绑定的div和vm1对象中以及绑定的div中是可以使用的，这就是全局过滤。

*在vue官方文档中提醒我们：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

4、过滤器传值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过滤器传值</title>
</head>
<body>
   <div id="app">
     <p>{{name}}</p>
     <p>{{name | msgFilterName(",今年18岁,来自山东青岛")}}</p>
 </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//首先创建一个过滤器    
    //Vue.filter("",function(){})     两个参数，第一个是过滤器的名字，第二个是回调函数
	Vue.filter("msgFilterName",function(name,age){
		return name.replace("web前端工程师","Java开发工程师"+ age)
	});

	var vm = new Vue({
		el:'#app',
		data:{
			name:'hello,我是web前端工程师'

		}
	})

</script>
</html>

一只程序猿小白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue （第4篇教程 Vue.filter过滤器）

1、过滤器：vue 官方文档这样说：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：{{ message | capitalize }}<!-- ...
复制链接

扫一扫

专栏目录