Vue过滤器的简单使用--实时显示格式化的时间

Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 |

过滤的规则是自己定义的，通过给Vue实例添加选项filters来设置

通过过滤器对时间进行格式化从而实时显示时间

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue 过滤器的简单使用---实时显示格式化时间</title></head><body><div id="app">{{date | formatDate}}</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>//此函数的作用是在月份、日期、小时等小于10时在前面补0var padDate = function(value){return value<10 ? '0'+value : value;};var app = new Vue({el:'#app',data:{date:new Date()},filters:{//这里的value参数就是要过滤的数据formatDate : function (value) {var date = new Date(value);var year = date.getFullYear();var month = padDate(date.getMonth());var day = padDate(date.getDate());var hours = padDate(date.getHours());var minutes = padDate(date.getMinutes());var seconds = padDate(date.getSeconds())；//将整理好的格式化的日期返回return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds;}},//mounted是在el挂载到实例上后调用，一般第一个业务逻辑会在这里开启mounted:function(){var _this = this; //声明一个变量指向Vue实例this，保证作用域一致this.timer = setInterval(function(){  //设置定时器，每秒执行一次function函数，//函数是获取当前时间并给date变量赋值(每秒赋值一次)_this.date = new Date();  //修改数据date},1000);},beforeDestroy:function(){if(this.timer){clearInterval(this.timer);  //在Vue实例销毁前，清除定时器}}})
</script></body>
</html>

过滤器也可以串联：

过滤器也可以接受参数：

这里的字符串arg1 和 arg2 分别传给过滤器的第二个和第三个参数，第一个是数据本身

Vue过滤器的简单使用--实时显示格式化的时间相关推荐

vue 过滤器做字数限制并显示省略号
//vue 过滤器做字数限制并显示省略号{{value | ellipsis(15)}} Vue.filter('ellipsis', (value, num) => {const nums = ...
js 实时显示不同时区时间
js 实时显示不同时区时间钟表先讲一个与时间有关"千年虫"事件,千年虫是一种年份只用两位十进制数来处理的程序来处理日期上的bug(计算机程序故障),会引发各种各样的系统功能紊乱, ...
Qt中利用定时器QTimer实时显示当前日期和时间
Qt中利用定时器QTimer实时显示当前日期和时间时显示当前日期和时间.下面说明方法: 1. 在工程中声明一个全局QTimer对象 QTimer *timer; 2. 在构造函数中定义QTimer, ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
stm32f407用oled实时显示日期和时间
这里我用的rtc时钟是非常好用的,先借鉴一下正点原子的理论知识. STM32F4 的 RTC,是一个独立的 BCD 定时器/计数器.RTC 提供一个日历时钟(包含年月日时分秒信息).两个可编程闹钟(A ...
Vue过滤器（filters）的简单使用
1.Vue过滤器的简单介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达 ...
利用Handler通信来实时显示系统时间
关键技术: 本程序实现了在屏幕中实时显示系统的时间,其中用到了Handler.Timer.TimerTask.Message等关键技术. 思路分析: 我们都知道,在Android中程序不能在主线程中( ...
一个简单的Vue过滤器
一个简单的Vue过滤器什么是过滤器: 是一种数据处理的方式,它并不是一定需要使用的. 如果不用过滤器的话,用 methods 或者 computed 配置项也可以实现. 演示一个简单的过滤器,把时间 ...
vue 过滤器格式时间秒数，js 时间日期格式化
vue过滤器将总秒数转化为 00:00:00 Vue.filter('filterTime',function (value) {let t;if(value > -1){let hour = ...

Vue过滤器的简单使用--实时显示格式化的时间

Vue过滤器的简单使用--实时显示格式化的时间相关推荐

最新文章

热门文章