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重要知识更新
Jul 08 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
在Python中使用gRPC的方法示例
2018/08/08 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
什么是URL
2015/12/13 面试题
企划主管岗位职责
2013/12/12 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
社会实践活动报告
2015/02/05 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
bose降噪耳机音能消除人声吗
2022/04/19 数码科技