详解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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
简单实现jquery焦点图
Dec 12 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
PHP实现图片压缩
2020/09/09 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
windows下python和pip安装教程
2018/05/25 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
物业经理自我鉴定
2014/03/03 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
社区文艺活动方案
2014/08/19 职场文书
消防演习通知
2015/04/25 职场文书
收入证明范本
2015/06/12 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
遗嘱格式范本
2015/08/07 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Redis 常见使用场景
2021/08/30 Redis
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis