<!DOCTYPE html>

<html>

<head> <meta charset="utf-8">

    <title>Vue 示例</title>

</head>

<body>

    <div id="app" >

      {{ date | formatDate }}

    </div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var padDate = function(value){

        return value < 10 ? '0' + value :value;

    }

    var app = new Vue({

        el: '#app',

        data: {

            date: new Date()

        },

        filters: {

            formatDate: function (value) {

                var date = new Date(value);

                var year = date.getFullYear();

                var month = padDate(date.getMonth() + 1);

                var day = padDate(date.getDay());

                var hours = padDate(date.getHours());

                var minutes = padDate(date.getMinutes());

                var seconds = padDate(date.getSeconds());

                // 整理并返回

                return year + '-' + month + '-' + day + '-' + hours + '?' + minutes + '?' + seconds;

            }

        },

        mounted: function () {

            var _this = this; // 指向this 变量作用域一致;

            this.timer = setInterval(function() {

                _this.date = new Date(); // 修改date

            },1000);

        },

        beforeDestroy: function() {

            if (this.timer) {

                clearInterval(this.timer);

            }

        }

        // created: function () {

        //     console.log(this.a);

        // },

        // mounted: function () {

        //     var _this = this; //声明一个变量指向 Vue 实例 this，保证作用域一致

        //     this.timer = setInterval (function () {

        //         this.date = new Date();

        //         console.log(this.date);// 修改date

        //     },1000);

        // },

        // beforeDestory: function () {

        //     if (this.timer) {

        //         clearInterval(this.timer);  //在 Vue 实例销毁前，清除我们的定时器

        //     }

        // }

    })

</script>

</body>

</html>

　　

前端界面显示当前时间的Vue代码的更多相关文章

  1. paip.前端加载时间分析之道优化最佳实践

    paip.前端加载时间分析之道优化最佳实践 1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的加载,看时间...可以排除编程语言的问题and 数据库.. ## ...

  2. 前端工程化（三）---Vue的开发模式

    从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...

  3. 团队协作统一vue代码风格，vscode做vue项目时的一些配置

    1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...

  4. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  5. vscode vue代码提示错误

    在用vscode编写vue代码时,因为安装的有vetur插件,所以当代码中有v-for语法时,会提示 [vue-language-server] 'v-for' directives require ...

  6. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  7. 前端开发组件化设计vue,react,angular原则漫谈

    前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...

  8. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  9. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  10. vue进阶：vs code添加vue代码片段

    如何设置? 选择或创建 配置代码 如何使用? 一.如何设置? 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configur ...

随机推荐

  1. 19-Docker数据持久化

    什么是Docker数据持久化 容器在运行时会在镜像层上加上一层:可写层. 当删除容器时,可写层就会一起被删除,数据丢失. 数据持久化就是就是将数据持久化保存,删除容器之后,数据仍然存在. 方法1-挂载 ...

  2. 李沐多模态串讲视频总结 ALBEF VLMo BLIP CoCa BEITv3 模型简要介绍

    开场 多模态串讲的上篇是比较传统的多模态任务 多模态最后的模态交互很重要 传统的缺点是都用了预训练的目标检测器,训练和部署都很困难. ViLT 把预训练的目标检测器换成了一层的 Patch Embed ...

  3. uniapp+thinkphp5实现微信扫码支付(APP支付)

    前言 统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返回预支付订单号的接口,目前微信支付所有场景均使用这一接口.下面介绍的是其中APP的支付的配置与实现流程 配置 1.首先登录 ...

  4. 嵌入式测试手册——基于NXP iMX6ULL开发板（2）

    基于测试板卡:创龙科技TLIMX6U-EVM是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的评估板,由核心板和评估底板组成.核心板经过专业的PCB Layout ...

  5. 记录一次python3 flask 多线程被执行两次的问题

    前言 最近在使用 python3 flask 做管理服务,需要实现服务中 flask server 和 另一个多线程while循环同时存在,如下 from flask import Flask , j ...

  6. sqlite相关

    前言 本文记录一些sqlite相关笔记,随时更新. 正文 时间函数 datetime() -- 当前时间 2022-03-24 17:32:43 select datetime('now'); --2 ...

  7. ubuntu16.04 安装 eclips c/c++

    前言 最近需要在ubuntu16上使用eclips编译c,尝试了apt安装和官网最新包安装甚至应用商店安装,效果都不太理想,现在把我的安装方法记录一下. 正文 !!!前提,已经自己配置好了java8的 ...

  8. 基于FileZilla上传、下载服务器数据的方法

      本文介绍FileZilla软件的下载.配置与使用方法.   在之前的博客中,我们提到了下载高分遥感影像数据需要用到FTP(文件传输协议,File Transfer Protocol)软件FileZ ...

  9. 基于EF Core存储的国际化服务

    前言 .NET 官方有一个用来管理国际化资源的扩展包Microsoft.Extensions.Localization,ASP.NET Core也用这个来实现国际化功能.但是这个包的翻译数据是使用re ...

  10. 基于EF Core存储的Serilog持久化服务

    前言 Serilog是 .NET 上的一个原生结构化高性能日志库,这个库能实现一些比内置库更高度的定制.日志持久化是其中一个非常重要的功能,生产环境通常很难挂接调试器或者某些bug的触发条件很奇怪.为 ...