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 相关文章推荐
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
学生会竞选自荐信
2013/10/12 职场文书
大学老师推荐信
2014/02/25 职场文书
委托书怎么写
2014/07/31 职场文书
创先争优个人承诺书
2014/08/30 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS