详解Vue2.0里过滤器容易踩到的坑
更新时间：2017年06月01日 14:21:08 作者：sinat_36555135
本篇文章主要介绍了Vue2.0里过滤器容易踩到的坑，vue2.0需要自己定义过滤器。有兴趣的可以了解一下
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><!-- 在vue2.0里 过滤器只能用类似函数的写法reverseString( 'I must tell you:')，括号内是参数，不同于vue1.0的用空格后加参数的写法" msg|reverseString 'I must tell you:' " -->
<!-- <p v-text="msg|reverseString( 'I must tell you:' )"></p>失效 -->
<!-- v-text里用过滤器失效，原因是在vue2.0里 管道符‘|'只能用在mousetache和v-bind中 -->
</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来代替过滤器。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ref在我们开发项目当中很重要的,在 Vue 中使用 ref 可以提高代码的可读性和维护性,因为它直接标识出了组件中需要操作的具体元素或组件实例,本文我将给大家带来的是vue3中用ref获取dom的操作,文中有相关的代码示例供大家参考,需要的朋友可以参考下2024-06-06
vue+elementUI实现右击指定表格列的单元格显示选择框功能
这篇文章主要介绍了vue+elementUI实现右击指定表格列的单元格显示选择框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
文章介绍了在Vue项目中使用ElementUI或ElementPlus组件库时,如何通过`el-form`标签的`:rules`属性进行表单验证,`:rules`属性用于定义表单项的验证规则,包括必填项、格式校验、长度限制等,文章还展示了如何定义基本验证规则和自定义验证函数,感兴趣的朋友一起看看吧2025-03-03
vue3 组件与API直接使用的方法详解(无需import)
这篇文章主要介绍了vue3 组件与API直接使用的方法(无需import)，主要包括vue3自动导入和API的自动引入问题，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
本篇文章主要介绍了vue params、query传参使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue中对时间戳的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue中如何使用vue-baberrage生成弹幕，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了element-ui upload组件多文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
vue3.0 CLI - 2.1 - component 组件入门教程
这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件，本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-09-09
最新评论