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和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
手把手带你封装一个vue component第三方库
Feb 14 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
在vue中阻止浏览器后退的实例
Nov 06 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python程序控制NAO机器人行走
2019/04/29 Python
django使用channels实现通信的示例
2020/10/19 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
求职信模板标准格式范文
2014/02/23 职场文书
我的小天地教学反思
2014/04/30 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript