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完美拖拽,可返回拖动轨迹
Mar 29 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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伪静态之APACHE篇
2014/06/02 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP递归创建多级目录
2015/11/05 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
详解Python字典小结
2018/10/20 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python 类之间的参数传递方式
2019/12/20 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
工程师岗位职责
2013/11/08 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
监护人证明
2015/06/19 职场文书
小学作文之描写天气
2019/08/15 职场文书
Python词云的正确实现方法实例
2021/05/08 Python