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 相关文章推荐
jQuery实用基础超详细介绍
Apr 11 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
js实现随机点名小功能
Aug 17 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
javascript self对象使用详解
2016/10/18 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python和c语言的主要区别总结
2019/07/07 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
前处理班长职位说明书
2014/03/01 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏