Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化,例如时间戳格式化。

过滤器可以用在:

  • 双花括号插值
  • v-bind 表达式 (2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

<!-- 在双花括号中 -->
{{ timestamp | format }} <!-- 在 `v-bind` 中 -->
<div v-bind:time="timestamp | format"></div>

全局注册

<!--时间戳转换为时间-->
Vue.filter('format', function (value) {
const date = new Date(value)
return `${date.getFullYear()}-${date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
})

组件中局部注册

new Vue({
el: '#app',
data: {
timestamp: 1548918359000,
}, filters: {
format: function(value) {
const date = new Date(value)
return `${date.getFullYear()}-${date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
},
},
)}

链式用法

过滤器可以串联:

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

需注意过滤器的先后顺序。

接收参数

过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

vue 过滤器基本使用的更多相关文章

  1. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  2. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  3. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

  4. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

  5. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  6. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  7. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

  8. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  9. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

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

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

随机推荐

  1. (网页)textarea去掉回车换行

    转自CSDN: 1,把textarea内输入的内容中有回车换行的转成<br />传给后台, var content = $("#text").val().replace ...

  2. [20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED3.txt

    [20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED3.txt --//简单探究12c TABLE ACCESS BY INDEX ROWID BATCH ...

  3. SQL SERVER利用BCP命令在命令行下导出数据到csv文件中

    bcp "select * from (DBNAME).dbo.qt_trace where User_1 is not null" queryout c:\%date:~6,4% ...

  4. selenium+Python3.5获取验证码

    其中PIL为Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. PIL第三方库安装 pip install PI ...

  5. Oracle 表操作(转)

    1.增加新字段:alter table table_name add (name varchar(20) default 'http://www.zangjing.net/');. 2.修改表字段:a ...

  6. win7 系统中的加密文件打不开了

    网友提问:我原来安装的时候win7 32位 旗舰版系统,因为想电脑达到最大运行速度,所以决定把系统重装为64位的win 7系统.[了解win 7 32位于64位的区别]因为重装前未解密bitlocke ...

  7. PHP 截取字符串乱码的解决方案

    今天遇到一个坑,左右调试坑的我一脸懵逼,当我们对一条字符串进行截取的时候,通常第一个想到的就是substr()函数了,但是如果是中文+数字的字符串的话,这时候使用substr进行截取就会出现乱码的问题 ...

  8. IO_ObjectOutputStream(对象的序列化)

    对象序列化就是将一些对象写入到硬盘中存储起来,以便下次复用 import java.io.FileInputStream; import java.io.FileOutputStream; impor ...

  9. B+ Tree vs B Trees

    原文地址:https://blog.csdn.net/dashuniuniu/article/details/51072795 引子 最近一直回顾自己曾经写的一些文档,有一篇是关于 Clang Rew ...

  10. pek (北大oj)3070

    思路:矩阵快速幂, 二分加速 #include<cstdio> #include<cstring> #define ll long long #define mod 10000 ...