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 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
jquery validate demo 基础
2015/10/29 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
vue项目中使用百度地图的方法
2018/06/08 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
Python可变参数用法实例分析
2017/04/02 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Python 在函数上添加包装器
2020/07/28 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
python绘图模块之利用turtle画图
2021/02/12 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
P/Invoke是什么
2015/07/31 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
客服工作职责
2013/12/11 职场文书
顶岗实习接收函
2014/01/09 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
护士找工作求职信
2014/07/02 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Feign调用传输文件异常的解决
2021/06/24 Java/Android
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android