详解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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
javascript中的几个运算符
Jun 29 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
js动态引入的四种方法
May 05 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
javascript实现简易的计算器
Jan 17 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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递归方法实现无限分类实例代码
2014/02/28 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python for i in range ()用法详解
2020/09/18 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
五心教育心得体会
2014/09/04 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
高中运动会广播稿
2015/08/19 职场文书
校园安全学习心得体会
2016/01/18 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书