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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
深入理解javascript中的this
Feb 08 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python利用ansible分发处理任务
2015/08/04 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python实现k-means聚类算法
2018/02/23 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python使用Matplotlib画条形图
2020/03/25 Python
python实现海螺图片的方法示例
2019/05/12 Python
Python 在函数上添加包装器
2020/07/28 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
PHP面试题及答案二
2015/05/23 面试题
电气技术员岗位职责
2013/11/19 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
销售经理岗位职责
2015/01/31 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
物流业务员岗位职责
2015/04/03 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
pandas提升计算效率的一些方法汇总
2021/05/30 Python