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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
原生js+canvas实现验证码
Nov 29 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
Zend引擎的发展 [15]
2006/10/09 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python 自动批量打开网页的示例
2019/02/21 Python
详解python中eval函数的作用
2019/10/22 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
新教师工作感言
2014/02/16 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
付款委托书范本
2014/04/04 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
保护地球的宣传语
2015/07/13 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
PHP控制循环操作的时间
2021/04/01 PHP