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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vue2.0模拟锚点的实例
Mar 14 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实现文件上传二法
2006/10/09 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python中用Spark模块的使用教程
2015/04/13 Python
给Python入门者的一些编程建议
2015/06/15 Python
python非递归全排列实现方法
2017/04/10 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python如何从文件读取数据及解析
2019/09/19 Python
python颜色随机生成器的实例代码
2020/01/10 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
python中doctest库实例用法
2020/12/31 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
办公室助理岗位职责
2013/12/25 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
《春雨》教学反思
2014/04/24 职场文书
医师定期考核实施方案
2014/05/07 职场文书
体育之星事迹材料
2014/05/11 职场文书
2015年行政工作总结范文
2015/04/09 职场文书