vue2中filter()的实现代码

时间：2021-05-26

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 minereverse msg is: Hello:enim era uoy

以上所述是小编给大家介绍的vue2中filter()的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章