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过滤器的使用的更多相关文章

  1. Vue自定义过滤器

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

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

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

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

  6. VUE:过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  9. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  10. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. linux使用shell 进行文件数据的读取与排序

    题目 shell脚本语言编写一个从键盘输入10名学生(含自己)的姓名. 性别.学号和家庭住址,然后按照学号排序,并将排序后的结果在屏幕上按对齐 的方式打印输出的程序. 代码 读入数据 数据排序(这里用 ...

  2. 1.Windows下安装nginx

    1.  到nginx官网http://nginx.org/上下载相应的安装包 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如下图所示:   进入window的cm ...

  3. CG-CTF | 综合题2

    查源码发现一个文件读取:http://cms.nuptzj.cn/about.php?file=sm.txt,用它把能找到的php都读取下来 <?php if (!isset($_COOKIE[ ...

  4. Java基础之方法详解

    方法的所属性 在Java的语言中,方法相当于C语言中的函数,但是它与传统的函数也有着明确的不同:在结构化的语言中,函数是一等公民,整个程序是由一个个函数组成的:但是在面向对象的语言里,类是一等公民,整 ...

  5. uniapp 之navigateTo:fail page 跳转路径不对

    开发uniapp,点击列表跳转详情报错 [system] navigateTo:fail page `/pages/tabBar/index/detail/detail?title=uni-app行业 ...

  6. win10 安装了virtualBox 启动报错 rc=-5640

    刚刚安装的virtualbox 启动就弹窗报错,,但是通过找到log 发现了下面这样的一处报错: 然后搜素发现是跟win10应用程序错误,,解决办法如下: 1.到控制面板,,--程序 再次尝试,vir ...

  7. VUE Right-hand side of ‘instanceof’ is not an object 解决方案

    这里要注意一下, props之前没注意写成了   props: {     wrd: '',       sname:'zs'   },   这样是不能被解析成object的,所以一定要写的更具体一点 ...

  8. MySQL-default设置

    Both statements insert a value into the phone column, but the first inserts a NULL value and the sec ...

  9. 搭建python-flask开发环境

    ubuntu环境 1. 更新系统软件源: 没有通过更新系统软件源的话,可能无法通过apt-get install安装我们需要用到的软件: $ sudo apt-get update $ sudo ap ...

  10. linux压缩文件命令-zip

    首先cd到要压缩文件的目录,然后使用zip命令压缩文件 zip -r importExcel.zip importExcel -r表示递归 zip [参数]  [打包后的文件名]  [打包的目录路径] ...