vue2中filter()的实现代码


Posted in Javascript onJuly 09, 2017

vue2.0里,不再有自带的过滤器,需要自己定义过滤器。定义的方法如下:

注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。

Vue.filter('filtername',function(value,参数){
    return 参数+value.split('').reverse().join('');

  });1234123

完整代码如下:

<!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:' " -->
</div>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940411234567891011121314151617181920212223242526272829303132333435363738394041

输出结果为:

msg is: 
you are mine
reverse msg is: 
Hello:enim era uoy

以上所述是小编给大家介绍的vue2中filter()的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
对js关键字命名的疑问介绍
Apr 25 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
You might like
PHP 万年历实现代码
2012/10/18 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php中error与exception的区别及应用
2014/07/28 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP实现简单登录界面
2019/10/23 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
js select常用操作控制代码
2010/03/16 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python类定义的讲解
2013/11/01 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
python查看列的唯一值方法
2018/07/17 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python可以用来做什么
2020/11/23 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
自我鉴定四大框架
2014/01/17 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
付款承诺函范文
2015/01/21 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers