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


Posted in Javascript onJune 01, 2017

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来代替过滤器。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
vue实现购物车选择功能
Jan 10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 #Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
BootStrap selectpicker后台动态绑定数据
Jun 01 #Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 #Javascript
Require.JS中的几种define定义方式示例
Jun 01 #Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
诚信的演讲稿范文
2014/05/12 职场文书
社区节水倡议书
2015/04/29 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android