vue2中filter()的实现代码
更新时间：2020年4月20日 21:22 点击：2167
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。定义的方法如下：
注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。
Vue.filter('filtername',function(value,参数){
return 参数+value.split('').reverse().join('');
});1234123完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<script src='./vue2.js'></script>
<script>
window.onload=function(){
//类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。
Vue.filter('reverseString',function(value,myString){
// function里第一个参数value默认为使用这个过滤器的data值，在本例中是msg的值'you are mine'。请注意：第一个参数必须为自身的值，后面可以加任意多的参数
return myString+value.split('').reverse().join('');
});
new Vue({
el:'#box',
data:{
msg:'you are mine'
}
});
};
</script>
<body>
<div id='box'>
<p>msg is: <br>{{msg}}</p>
<hr>
<p>reverse msg is: <br>{{msg|reverseString( 'Hello:' )}}</p> <!-- 在vue2.0里 过滤器只能用类似函数的写法reverseString( 'I must tell you:')，括号内是参数，不同于vue1.0的用空格后加参数的写法" msg|reverseString 'I must tell you:' " -->
</div>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940411234567891011121314151617181920212223242526272829303132333435363738394041输出结果为：
msg is: you are mine reverse msg is: Hello:enim era uoy
以上所述是小编给大家介绍的vue2中filter()的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
nestjs中异常过滤器Exceptionfilter的具体使用
这篇文章主要介绍了nestjs中异常过滤器Exceptionfilter的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-07Angularjs中如何使用filterFilter函数过滤
这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下...2016-02-12源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods
本篇文章主要介绍的是Vue2 this 能够直接获取到 data 和 methods，阅读本文将能学到如何学习调试 vue2 源码、data 中的数据为什么可以用 this 直接获取到、methods 中的方法为什么可以用 this 直接获取到,需要的朋友可以参考一下...2021-09-23- 这篇文章主要介绍了jQuery遍历DOM节点操作之filter()方法,结合实例形式详细分析了filter的功能及4种具体用法,需要的朋友可以参考下...2016-04-17
Spring Security和自定义filter的冲突导致多执行的解决方案
这篇文章主要介绍了Spring Security和自定义filter的冲突导致多执行的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-23asp.net core MVC 全局过滤器之ExceptionFilter过滤器(1)
这篇文章主要为大家详细介绍了asp.net core MVC 全局过滤器之ExceptionFilter过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22- 这篇文章主要介绍了angularjs filter过滤器的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下...2016-04-24
- vue2.0里，不再有自带的过滤器，需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识，感兴趣的朋友一起看看吧...2020-04-20
- 之前文章我们描述给过Vue3 的七通信使用，今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容...2021-09-25
Event filter with query SELECT * FROM __InstanceModificationEvent WITHIN
这篇文章主要介绍了Event filter with query SELECT * FROM __InstanceModificationEvent WITHIN ,需要的朋友可以参考下...2016-01-27php中array_map,array_filter,array_walk区别
在php中array_map,array_filter,array_walk三个函数都是对数据操作的，下面我来介绍这三个函数的用法与区别。 array_walk: array_walk()返回布尔值，如果回调函数...2016-11-25在django中查询获取数据,get, filter,all(),values()操作
这篇文章主要介绍了在django中查询获取数据,get, filter,all(),values()操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-09- Filter过滤器是javaWeb层面的,它跟Servlet类似,每次前端请求,首先进入的是过滤器,我们必须实现Filter接口,重写三个方法,才能使用Filter过滤器,需要的朋友可以参考下...2021-06-28
- 这篇文章主要介绍了AngularJS的filter，中文名“过滤器”是用来过滤变量的值，或者格式化输出，得到自己所期望的结果或格式的东东，的相关资料,需要的朋友可以参考下...2015-12-29
django rest framework使用django-filter用法
这篇文章主要介绍了django rest framework使用django-filter用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-15- 这篇文章主要介绍了使用Filter拦截器如何实现请求跨域转发，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-08-29
- 过滤器验证ip地址，是否合法。 定义和用法 该过滤器验证FILTER_VALIDATE_IP价值作为一个网址。 名称： “ validate_ip ” 身份证号码： 275 可能...2016-11-25
Springboot 如何实现filter拦截token验证和跨域
这篇文章主要介绍了Springboot 如何实现filter拦截token验证和跨域操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-08-12