过滤器

对要显示的数据进行特定格式化后再显示

并未改变原本的数据，可是产生新的对应的数据

  • <!DOCTYPE html>
    
<html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>10_Vue_filter</title>
    
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    
    </head>
    
    <body>
    
        <div id="test">
    
            <p>{{curTime | timeFormat}}</p>
    
        </div>
    
        <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
    
        <script src="./js/vue.js"></script>
    
        <script>
    
            Vue.filter("timeFormat", function (value, timeType="YYYY-MM-DD HH:mm:ss") {
    
                let newValue = moment(value).format(timeType);
    
                return (newValue === "Invalid date")?"":newValue;
    
            });
    
            new Vue({
    
                el: "#test",
    
                data:{
    
                    curTime: ""
    
                },
    
                mounted(){
    
                    setInterval(()=>{
    
                        this.curTime = Date.now();
    
                    }, 1000)
    
                }
    
            });
    
        </script>
    
    </body>
    
</html>

vue_过滤器： 对要显示的数据进行特定格式化后再显示的更多相关文章

  1. 用texarea存储数据，查询数据库后原样显示在jsp中，包括空格和回车换行

    用texarea存储数据,查询数据库后原样显示在jsp中,包括空格和回车换行

  2. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  3. bootstrap的alert提示框的关闭后再显示问题

    bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() ...

  4. ASP.NET网络爬虫小研究 HtmlAgilityPack基础，爬取数据保存在数据库中再显示再自己的网页中

    1.什么是网络爬虫 关于爬虫百度百科这样定义的:网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些 ...

  5. JMeter 通过CSV Data Set Config 中文参数化数据，插入数据库后中文显示乱码，解决办法

    问题描述: 1. 需要设置中文参数化,模拟post请求,通过配置元件 - CSV Data Set Config 进行设置. 2. 数据库数据显示乱码(实际数据为 “测试001”) 解决办法: CSV ...

  6. 小谢第37问：关于websocket推送进度，本地保存进度条，然后跳出页面进入后再显示的问题

    1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...

  7. 使用swiper插件，隐藏swiper后再显示，不会触发自动播放的解决办法

    问题: 项目中有一个需求,当点击P1时,两个页面进行轮播.当点击P2时,页面不轮播. 设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发. 解决: 在轮播器配置里,配置observe ...

  8. swipe display: none后再显示，加载内容后，滑动失效问题

    只需要添加这两个属性即可: observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化sw ...

  9. idea使用/***/单行注释格式化后会显示多行,如何能保持单行显示

随机推荐

  1. 基于ionic4、cordova搭建android开发环境

    前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...

  2. 第七节:Trigger(SimpleTrigger、CronTrigger)哑火(MisFire)策略 :

    一. 简介 1. 什么是哑火 由于某些原因导致触发器(trigger)在该触发的时候没有得到触发,后续对应的解决策略即为哑火策略.(个人理解) 2. 哑火触发的条件 ①:所有的工作线程都在忙碌,导致某 ...

  3. HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  4. Hibernate 4.3.11 下问题的解决

    2017.01.09 问题:hibernate.HibernateException: Access to DialectResolutionInfo cannot be null when 'hib ...

  5. Blender 快捷键笔记

    A Select All/Unselect All shift+A Create Z 切换wireframe和solid mode TAB Start or quit EditMode B Activ ...

  6. Nginx详解篇

    Nginx主配置文件和参数: Nginx的默认站点目录是Nginx安装目录/application/nginx/下的html目录,如果要部署网站业务,只需要把开发号好的程序全部放置到/applicat ...

  7. C语言之路-2-判断

    #include<stdio.h> int main() { ; printf("请输入"); scanf("%d",&a); ){ pri ...

  8. Django之BBS博客项目

    一.登陆功能(验证码) from geetest import GeetestLib from django.contrib import auth #使用极验滑动验证码的登陆 def login(r ...

  9. [ZJOI2008]树的统计-树链剖分

    #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+5; #define mid ((l+r)>> ...

  10. 洛谷P5206 [WC2019]数树 [容斥，DP，生成函数，NTT]

    传送门 Orz神仙题,让我长了许多见识. 长式子警告 思路 y=1 由于y=1时会导致后面一些式子未定义,先抓出来. printf("%lld",opt==0?1:(opt==1? ...