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 29 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
详解javascript函数的参数
Nov 10 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
js中关于Blob对象的介绍与使用
Nov 29 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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递归遍历多维数组的方法
2015/04/18 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
js字符编码函数区别分析
2008/06/05 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python中获取对象信息的方法
2015/04/27 Python
python脚本内运行linux命令的方法
2015/07/02 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
关于反爬虫的一些简单总结
2017/12/13 Python
python用户管理系统的实例讲解
2017/12/23 Python
python3调用R的示例代码
2018/02/23 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
医院检讨书范文
2014/02/01 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Python学习之时间包使用教程详解
2022/03/21 Python