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 相关文章推荐
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 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
对Session和Cookie的区分与解释
2007/03/16 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
Bootstrap表单布局
2016/07/19 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
python解析基于xml格式的日志文件
2017/02/25 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
python模拟实现斗地主发牌
2020/01/07 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python扫描端口的实现
2021/01/25 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
出纳岗位职责范本
2013/12/01 职场文书
草船借箭教学反思
2014/02/03 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
大学生党性分析材料
2014/12/19 职场文书
岗位职责范本大全
2015/02/26 职场文书
慈善募捐倡议书
2015/04/27 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang