vue-fiters过滤器的使用
1、定义过滤器

2、使用过滤器
......
<el-table-column prop="user_gender" align="center" label="性别" width="50" ></el-table-column>
<el-table-column align="center" label="出生日期" width="100"> {{user_birth | dateFormat}}</el-table-column>
<el-table-column align="center" label="性别" width="50" >{{user_gender}}</el-table-column>
......
filters: { //自定义私有过滤器 过滤器有两个条件 【过滤器名称 和 处理函数】
dateFormat: function (dateStr, pattern=""){
var dt = new Date(dateStr)
//yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if(pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
}else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~~`
}
}
}
推荐:https://www.cnblogs.com/xuqp/p/9395269.html
vue-fiters过滤器的使用的更多相关文章
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- VUE:过滤器及日期格式化moment库
VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- tapmode="hover"属性
.hover{ opacity: .; } <span tapmode="hover" onclick="fnOpen()">open</sp ...
- php curl文件上传
<?php /** * 这是一个自动化部署的类, 非常简单,思想就是压缩,上传,然后解压覆盖,所以请小心使用. * @author liuchao <249757247@qq.com> ...
- 每隔2分钟,div元素顺序淡入
我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个box有n个元素,这些元素顺序淡入,每隔2分钟,执行一次,代码开始: <div></div> <div>& ...
- USACO2018 DEC(Platinum) (树上乱搞,期望+凸包)
发现这跟\(Gold\)难度简直天差地别啊.. \(T1\) 传送门 解题思路 这道题还是很可做的,发现题意可以传化成一棵树每次从叶子节点删边,然后有\(m\)条限制,形如\(a\)在\(b\)前面删 ...
- C++ Boost库的编译及使用
https://www.jianshu.com/p/de1fda741beb https://www.cnblogs.com/weizhixiang/p/5804778.html Windows编译 ...
- sip/sdp/rtp/rtcp/rtsp间的关系
用一句简单的话总结:RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步. 转自该博客:http://blog.csdn.net/xdwyyan/article/detai ...
- leetcode-mid-array-5. Longest Palindromic Substring
mycode 12.51% class Solution(object): def longestPalindrome(self, s): """ :type s: ...
- Linux动态库和静态库
Linux下动态库查看办法:nm -D libavformat.so Linux下静态库查看办法:ar -t libavformat.a ------------------------------- ...
- qbzt day6 上午
还是合并石子,但是这次可以任意两个合并,并且求最大异或和 f[s]表示把s所对应的的石子合并为一堆的最小代价 最后求f[2^n-1] 怎么转移? 最后一次也是把两堆合并成一堆,但是会有很多情况,可以枚 ...
- C#和.NET获取绝对路径
c#获取绝对路径:System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "log.txt"); .net获取绝 ...