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对象弹出一个层
Mar 26 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Javascript复制实例详解
Jan 28 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
laravel学习教程之关联模型
2016/07/30 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
财务部绩效考核方案
2014/05/04 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
初中数学教学反思范文
2016/02/17 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
vue3获取当前路由地址
2022/02/18 Vue.js