vue学习笔记之过滤器的基本使用方法实例分析


Posted in Javascript onFebruary 01, 2020

本文实例讲述了vue学习笔记之过滤器的基本使用方法。分享给大家供大家参考,具体如下:

以下是一个将浏览器默认时间格式格式化的例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- | 是管道符,可以对前面的数据进行过滤,一般用于格式化数据,eg,货币(1,000,000)-->
<div id="root">
  {{date | formatDate}}
</div>
<script>
  // 在时间小于10前补0
  var padDate = function (value) {
    return value < 10 ? '0' + value : value;
  }
  var app = new Vue({
    el: "#root",
    data: {
      date: new Date()
    },
    /*过滤器*/
    filters: {
      formatDate: function (value) {
        var date = new Date(value);
        var year = date.getFullYear();
        var month = padDate(date.getMonth());
        var day = padDate(date.getDay());
        var hour = padDate(date.getHours());
        var minutes = padDate(date.getMinutes());
        var seconds = padDate(date.getSeconds());
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
      }
    },
    /*挂载完成,html页面渲染完毕,一半做一些Ajax操作,只执行一次*/
    mounted: function () {
      var _this = this;
      this.timer = setInterval(function () {
        _this.date = new Date();
      }, 1000);
    },
    beforeDestory: function () {
      if (this.timer) {
        clearInterval(this.timer);// 在vue实例销毁前清楚定时器
      }
    }
  })
</script>
</body>
</html>
  • 在vue中使用过滤器,要注意!只是改变了在前端页面渲染的格式,而不会改变数据的存储的格式
  • 全局过滤器定义必须始终位于Vue实例之上,否则你将会得到一个“Failed to resolve filter: XXX”的错误信息。
  • 过滤器串联
{{text | filter1 | filter2}}
  • 过滤器接受参数 【js中接受的参数,第一个始终是value,传入的参数是第2,3,4....个参数】
{{text | filter('arg1','arg2')}}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
浅析node.js的模块加载机制
May 25 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 #Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 #Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 #Javascript
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
js页面加载后执行的几种方式小结
Jan 30 #Javascript
javascript设计模式之装饰者模式
Jan 30 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php实现字符串翻转的方法
2015/03/27 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
JavaScript事件对象深入详解
2018/12/30 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python之reload流程实例代码解析
2018/01/29 Python
django项目搭建与Session使用详解
2018/10/10 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
2014年“四风”问题个人整改措施
2014/09/17 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis