Vue系列之 => 全局,私有过滤器
私有过滤器也称局部过滤器
<script>
// 全局过滤器
Vue.filter("datatime",function(timestr){
var tm = new Date(timestr);
var yy = tm.getFullYear();
// ES6新方法padStart,填充两位,以0填充。
var mm = (tm.getMonth() + 1).toString().padStart(2,"0");
var dd = tm.getDate().toString().padStart(2,"0");
var hh = tm.getHours().toString().padStart(2,"0");
var min = tm.getMinutes().toString().padStart(2,"0");
var ss = tm.getSeconds().toString().padStart(2,"0");
return `${yy}-${mm}-${dd} ${hh}:${min}:${ss}`
}) var vm = new Vue({
el: "#app",
data: {
id : "",
name : "",
keywords : "",
list: [{
id: 1,
name: "nameA",
Ctime: new Date()
},
{
id: 2,
name: "nameB",
Ctime: new Date()
},
{
id: 3,
name: "nameC",
Ctime: new Date()
},
{
id: 4,
name: "nameD",
Ctime: new Date()
},
]
},
methods: {
add(){
add_dict = {id : this.id , name : this.name , Ctime : new Date()};
this.list.push(add_dict);
this.id = this.name = "";
},
del(id){
// this.list.some( (item,index) => {
// if(id == item.id){
// this.list.splice(index,1);
// }
// })
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
});
this.list.splice(index,1);
},
search(keyword){
return new_list = this.list.filter( item => {
if(item.name.includes(keyword)){
return item;
}
})
}
},
// 局部过滤器
filters : {
time : function(timestr){
var tm = new Date(timestr);
var yy = tm.getFullYear();
var mm = tm.getMonth() + 1;
var dd = tm.getDate();
var hh = tm.getHours();
var min = tm.getMinutes();
var ss = tm.getSeconds(); return `${yy}-${mm}-${dd} ${hh}:${min}:${ss}`
}
}
})
</script>
Vue系列之 => 全局,私有过滤器的更多相关文章
- Vue学习之路第十八篇:私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
<div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
- Vue学习之全局和私有组件小结(七)
一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...
- 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- vue.js(12)--过滤器
vue中的全局过滤器与定义私有过滤器 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <met ...
随机推荐
- java ipv4校验正则字符串
String IPV4_REGEX = "\\A(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)) ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- 【PyQt5-Qt Designer】QMessageBox 弹出框总结
QMessageBox QMessageBox类中常用方法 方法 描述 information(QWdiget parent,title,text,buttons,defaultButton) 弹出 ...
- 27-4-DMA2D图形加速器
在实际使用 LTDC 控制器控制液晶屏时,使 LTDC 正常工作后,往配置好的显存地址写入要显示的像素数据, LTDC 就会把这些数据从显存搬运到液晶面板进行显示,而显示数据的容量非常大,所以我们希望 ...
- InnoDB启用大内存页
在 Linux 操作系统上运行内存需求量较大的应用程序时,由于其采用的默认页面大小为 4KB,因而将会产生较多 TLB Miss 和缺页中断,从而大大影响应用程序的性能.当操作系统以 2MB 甚至更大 ...
- css继承样式怎么控制?用选择器
css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...
- Http服务基础原理
http服务相关解释 http : Hyper Text Transfer Protocol, 80/tcp 超文本传输协议,基于tcp传输协议的80端口传输 html: Hyper Text M ...
- windows media player 官方修复工具下载及修复方法
http://download.microsoft.com/download/E/2/3/E237A32D-E0A9-4863-B864-9E820C1C6F9A/MicrosoftFixit.Win ...
- vue-devtools : vue的调试工具及log显示工具 vconsole
使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化.另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验. 注意:请留意如果页面使用了一个生产环境 ...
- 虚拟地址IP
http://blog.csdn.net/whycold/article/details/11898249