过滤器

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

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

  • <!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. Java基础知识拾遗（一）

    类型提升规则 Java定义了几个应用于表达式的类型提升规则:所有byte.short和char类型的值都被提升为int类型.如果有一个操作数是long类型,将这个表达式提升为 long 类型:如果有一 ...

  2. Shiro与CAS整合实现单点登录

    1.简介 CAS:Yale 大学发起的一个开源项目,旨在为 Web 应用系统提供一种可靠的单点登录方法. Shiro:Apache Shiro是一个Java安全框架,可以帮助我们完成认证.授权.会话管 ...

  3. spring Bean的完整生命周期

    spring 容器中的bean的完整生命周期一共分为十一步完成. 1.bean对象的实例化 2.封装属性,也就是设置properties中的属性值 3.如果bean实现了BeanNameAware,则 ...

  4. 封装ajax，让调用变得简单优化

    思考一下: 通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data.url.method.success.error等.那么我们想一下能不能先把ajax封装起来,在每次 ...

  5. C#多态及接口

    直接看代码吧 using System; using static System.Console; namespace ConsoleApp { //使用abstract,抽象类或方法,不能使用vir ...

  6. JAVA进阶13

    间歇性混吃等死,持续性踌躇满志系列-------------第13天 1.查看线程的运行状态 package code0327; class Demo01 implements Runnable { ...

  7. SpringBoot使用Redis共享用户session信息

    SpringBoot引入Redis依赖: <dependency> <groupId>org.springframework.boot</groupId> < ...

  8. vue之vuex学习

    知识点一:vuex是状态管理器(单向数据流) 每个Vuex应用程序的核心是商店.“商店”基本上是一个容纳您的应用程序状态的容器.有两件事使Vuex商店与普通的全局对象不同: Vuex商店是被动的.当V ...

  9. Docker: repository, image, container

    1. 查看image: docker images 2. 查看信息: docker info 3. 搜索image: docker search [image_name], 比如: docker se ...

  10. PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析

    sort() 函数用于对数组单元从低到高进行排序. rsort() 函数用于对数组单元从高到低进行排序. asort() 函数用于对数组单元从低到高进行排序并保持索引关系. arsort() 函数用于 ...