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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
js取整数、取余数的方法
May 11 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
node文件批量重命名的方法示例
Oct 23 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
小程序实现留言板
Nov 02 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
angular4实现带搜索的下拉框
Mar 25 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP中的session安全吗?
2016/01/22 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript 闭包
2011/09/15 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
Javascript的this用法
2017/01/16 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
个人简历的自荐信
2013/10/23 职场文书
环保倡议书400字
2014/05/15 职场文书
师范生求职信
2014/06/14 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers
MySQL 原理与优化之Update 优化
2022/08/14 MySQL