vue允许自定义过滤器,被用作一些常见文本的格式化。由“管道符”指示,格式如下:
<!-- 在两个大括号中 -->
{{message | capitalize}}
 
<!-- 在 v-bind指令中 -->
<div v-bind:id="rawId | formatId"></div>

实例如下:

<div id="app">
{{ time | formatTime}}
</div> <script>
new Vue({
el: "#app",
data: {
time: '12345643'
},
filters: {
//对时间戳进行格式化
formatTime: function(value){
var unixTimestamp = new Date( value*1000 );
var D = new Date(unixTimestamp);
var H = D.getHours()>9 ? D.getHours() : "0"+D.getHours(),
M = D.getMinutes()>9 ? D.getMinutes() : "0"+D.getMinutes();
return H + ":" + M
}
}
})
</script>

vue 自定义过滤器的更多相关文章

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  3. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  4. vue 自定义过滤器 格式化金额(保留两位小数)

    1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val = val.toString().replace(/\$|\, ...

  5. Vue自定义过滤器格式化数字三位加一逗号

    <template> <div class="index-compont"> <div class="totalCount"> ...

  6. vue.js学习 自定义过滤器使用(2)

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  7. 第六节:Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

  8. Vue.js学习 Item14 – 过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...

  9. vue.js学习 自定义过滤器使用(1)

    在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...

随机推荐

  1. DFS or BFS --- 连通块

    Oil Deposits Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64 Descrip ...

  2. Codeforces Round #588 (Div. 1)

    Contest Page 因为一些特殊的原因所以更得不是很及时-- A sol 不难发现当某个人diss其他所有人的时候就一定要被删掉. 维护一下每个人会diss多少个人,当diss的人数等于剩余人数 ...

  3. C#生成/调用动态链接库

    参考地址:https://www.cnblogs.com/qq4004229/archive/2013/01/30/2882409.html 一.需求描述 (1)用代码生成动态链接库 (2)用C#代码 ...

  4. tomcat8 url包含|等特殊字符报错400的问题

    这个问题纠缠了我很久了,终于在今天早上解决了,感谢自己的不放弃和不断尝试的决心,我坚信,我可以找到解决方式!! 项目用的spring .spring mvc.hibernate框架,关于统一错误页面在 ...

  5. RabbitMQ启动出现的问题与解决办法

    问题1 使用命令启动 service rabbitmq-server start 报错如下: Starting rabbitmq-server (via systemctl): Job for rab ...

  6. Java集合学习(3):HashSet

    一.概述 HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素. HashSet是基于Has ...

  7. 解决pip安装时速度慢的问题

      http://blog.csdn.net/wukai0909/article/details/62427437 国内源: 新版ubuntu要求使用https源,要注意. 清华:https://py ...

  8. “GIS DICTIONARY A-Z” 查询页面开发(1)——bs4与词典数据处理

    第一天的工作:找到数据源,数据下载,数据处理. 数据源:"http://webhelp.esri.com/arcgisserver/9.3/java/geodatabases/definit ...

  9. golang reflect知识集锦

    目录 反射之结构体tag Types vs Kinds reflect.Type vs reflect.Value 2019/4/20 补充 reflect.Value转原始类型 获取类型底层类型 遍 ...

  10. 【转】UCOSIII基础知识点

    1.其中最有用的功能应该是时间片轮转法( roundrobin), 这个是 uC/OS-II 中不支持的,但是现在已经是 uC/OS-III 的一个功能了 2.uC/OS-III 被设计用于 32 位 ...