详解Vue2.0里过滤器容易踩到的坑

作者：sinat_36555135 时间：2024-05-09 10:40:46　

vue2.0里，不再有自带的过滤器，需要自己定义过滤器。定义的方法如下：

注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。

Vue.filter('filtername',function(value,参数){
return 参数+value.split('').reverse().join('');

});

function里第一个参数value默认为使用这个过滤器的data对象内的值，在本例中是msg的值'you are mine'。

坑1：第一个参数必须为自身的值，后面可以加任意多的参数。数序颠倒就会出错。

下面来一个最常见的小例子来说明在使用vue2.0过滤器并结合v-text时遇到的其他的几个坑：

需求：在页面输出一段反转顺序的字符串。

完整代码如下：

<!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>



</div>

</body>
</html>

输出结果为：

msg is:
you are mine

reverse msg is:
Hello:enim era uoy

坑2：在vue2.0里过滤器只能用类似函数的写法reverseString( ‘I must tell you:')，括号内是参数，不同于vue1.0的用空格后加参数的写法；

坑3：v-text里用过滤器失效，原因是在vue2.0里管道符‘|'只能用在mousetache和v-bind中。

以上只是一个简单的过滤器的用法，如果涉及到复杂的数据处理的过滤器，比如实现vue1.0里用到过滤器套过滤器的功能，个人感觉也可以用computed来代替过滤器。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

来源：http://blog.csdn.net/sinat_36555135/article/details/70678478

标签：vue,过滤器

投稿

详解Vue2.0里过滤器容易踩到的坑

猜你喜欢

pytorch 图像中的数据预处理和批标准化实例

模仿IE自动完成功能

asp.net实现图片以二进制流输出的两种方法

四种Python机器学习超参数搜索方法总结

在Heroku云平台上部署Python的Django框架的教程

js实现网页加载loading的显示

python http通信接口开发示例

Python机器学习从ResNet到DenseNet示例详解

Python爬取门户论坛评论浅谈Python未来发展方向

利用Python制作一个MOOC公开课下载器

浅谈Laravel模板实体转义带来的坑

Flash的Fallback Content等

SqlServer 获取字符串中小写字母的sql语句

python3实现弹弹球小游戏

解决Python3中的中文字符编码的问题

sql format()函数的用法及简单实例

Python 错误和异常代码详解

简单了解MySQL SELECT执行顺序

详解基于Node.js的微信JS-SDK后端接口实现代码

SQL Server 2005返回刚刚插入的数据条目id值