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 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
AngularJS表单验证功能分析
May 26 Javascript
layui实现动态和静态分页
Apr 28 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
浅谈Vue.js组件(二)
Apr 09 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 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 简单日历实现代码
2009/10/28 PHP
有关php运算符的知识大全
2011/11/03 PHP
php简单分页类实现方法
2015/02/26 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
详解python中的文件与目录操作
2017/07/11 Python
eclipse创建python项目步骤详解
2019/05/10 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
C#公司笔试题
2014/03/28 面试题
作风建设演讲稿
2014/05/23 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年采购员工作总结
2014/11/18 职场文书
入党积极分子考察意见
2015/06/02 职场文书