详解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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
JS中FormData类实现文件上传
Mar 27 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP7新增函数
2021/03/09 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python简单文本处理的方法
2015/07/10 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python实现打砖块游戏
2020/02/25 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
大学迎新晚会主持词
2014/03/24 职场文书
承兑汇票延期证明
2015/06/23 职场文书
百年校庆感言
2015/08/01 职场文书
小学教师教育随笔
2015/08/14 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers