过滤器

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

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

  • <!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. Redis protocol (redis通信协议)

    以前只会用redis -cli客户端, 或者在java程序里使用jedis来作为介质与redis服务器通信.这两天正好在实习中接触了一点这方面的内容. 五一放假就稍微翻了翻redis相关资料. 本篇博 ...

  2. windows下使用curl命令 && 常用curl命令

    什么是curl命令? curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种Linux发行版中,并且有DOS和Win32.Win64下的移植版本. 如何在windo ...

  3. 16、使用limit offset 分页时，为什么越往后翻越慢？如何解决？

    在mysql中limit可以实现快速分页,但是如果数据到了几百万时我们的limit必须优化才能有效的合理的实现分页了,否则可能卡死你的服务器哦. 当一个表数据有几百万的数据的时候成了问题! 如 * f ...

  4. 弄懂promise

    ECMAscript 6 原生提供了 Promise 对象. Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息 有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来 ...

  5. 人体姿势识别，Convolutional pose machines文献阅读笔记。

    开源实现 https://github.com/shihenw/convolutional-pose-machines-release(caffe版本) https://github.com/psyc ...

  6. POJ 2318 TOYS (叉积+二分)

    题目: Description Calculate the number of toys that land in each bin of a partitioned toy box. Mom and ...

  7. 简单使用Markdown

    Markdown是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式. 相比WYSIWYG编辑器 优点: 1.因为是纯文本,所以只要支持Markdown的地方都能获得一样 ...

  8. selenium——find_element_by_xx 与 find_element(By.XX,'XXXX')

  9. Robot Framework 环境安装(一)

    1.安装python:https://www.python.org/2.安装python的第三方库:robotframework (1)检查是否支持pip命令. (2)robotframework安装 ...

  10. Java Spring Boot VS .NetCore （四）数据库操作 Spring Data JPA vs EFCore

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...