vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
<div id="app">
<p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //script
<script>
//自定义一个私有的过滤器(局部)
var vm = new Vue({
el:'app',
data:{
msg:''
},
method:{},
filters:{//定义私有过滤器 过滤器有两个条件 过滤器名称和处理函数
formatStr:function(dataStr,pattern){
var date = new Date(dataStr)
var y = date.getFullYear()
// padStart()方法是ES6提供的填充字符串的方法,有两个参数 第一个是 填充完后字符串的总长度,第二个参数是用什么来填充字符串
// 这里要做的是 月份 和 天数 如果是一位的话在前面补上0 比如:2019-02-04
var m = (date.getMonth()+1).toString().padStart(2,'0')
var d = (date.getDate()).toString().padStart(2,'0')
if(pattern.toLowerCase()==='yyyy-MM-dd'){
return `${y}-${m}-${d}`
}else{
var hh = date.getHours()
var mm = date.getMinutes()
var ss = date.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
}
})
</script>
注意:过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器
vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串的更多相关文章
- Vue学习笔记【12】——过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾部,由 ...
- webpack学习(六)—webpack+react+es6(第3篇)
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- JavaScript ES6 数组新方法 学习随笔
JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...
- 看es6 字符串新方法有感
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // " ...
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
- vue学习-day02(自定义指令,生命周期)
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- Vue系列之 => 全局,私有过滤器
私有过滤器也称局部过滤器 <script> // 全局过滤器 Vue.filter("datatime",function(timestr){ var tm = new ...
- vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点
需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...
- vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法
//html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...
随机推荐
- Flask02-Template
## 基础使用 $ vim app/templates/index.html > <html> > <head> > <title>{{title ...
- JavaScript基础对象创建模式之模块模式(Module Pattern)(025)
模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织 代码块,这些黑盒的代码块内的功能可以根据不断变化的软件 ...
- JAVA设计模式 4【创建型】理解建造者模式
Hello,又是拖了几天更,实在是忙的要死,有时候忙累了,真的就是倒头睡的那种,刚好今天闲下来了.今天来更新一篇建造者模式. 其实建造者模式,我们已经在上一节已经有了解过了.只不过是上一节没有提到这样 ...
- Python3笔记001 - 1.1 python概述
第1章 认识python python语言特点 跨平台 开源的 解释型 面向对象 python语言的特点是:以对象为核心组织代码,支持多种编程范式,采用动态类型,自动进行内存回收,并能调用C语言库进行 ...
- Spring笔记(2) - 生命周期/属性赋值/自动装配及部分源码解析
一.生命周期 @Bean自定义初始化和销毁方法 //====xml方式: init-method和destroy-method==== <bean id="person" c ...
- PHPstorm快捷键的学习
1.Ctrl + 空格 当输入代码时,PHPstorm 会自动出现联想选项. 但是,如果在输入时联想时错过了选择,我们要想让他再一次出现联想,通常采用的方法是在先前的输入后面再输入字符,这时联想又会出 ...
- 【盗版动归】Codeforces998C——Convert to Ones 归一操作
嘤嘤嘤,因为最近文化课老师追的紧了+班主任开班会,所以这博客是赶制的赝品 题目: You've got a string a1,a2,…,ana1,a2,…,an, consisting of zer ...
- day55 js进阶
目录 引子 一.BOM操作 1 window对象 2 window子对象 3 history对象 4 location对象(掌握) 5 弹出框 6 计时器相关 二.DOM操作 1 查找标签 1.1 直 ...
- day54 js基础
目录 一.变量 二.数据类型 1 数值类型(number) 2 字符类型(string) 3 字符类型常用方法 4 布尔值(boolean) 5 null与undefined 6 对象 7 运算符 8 ...
- CTF_show平台 web题解 part3
web13 题目显示文件上传,各类型上传均提示错误,在使用ctf-scan扫描的时候,发现upload.php.bak. 查看源码: <?php header("content-typ ...