vue中过滤器filter的讲解
更新时间：2019年01月21日 09:22:59 作者：muzidigbig
今天小编就为大家分享一篇关于vue中过滤器filter的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}}中的|表示过滤器管道符,过滤器后面的为过滤函数 -->
<p>{{msg | msgFormat('疯狂+1')}}</p>
<!-- 多个过滤函数进行调用 -->
<p>{{msg | msgFormat('疯狂+1') | test}}</p>
<h2>{{time | dateFormat}}</h2>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//过滤器的定义语法
//Vue.filter('过滤器的名称',function () { })
//过滤器中的function,第一个参数data，已经被规定死，永远都是过滤器管道符前面传递过来的数据
// 从第二个参数开始就是传值
// Vue.filter('过滤器名称',function(data){
// return data+123
// });
//定义一个Vue全局的过滤器，名字：msgFormat
Vue.filter('msgFormat',function(msg,param) {
//字符出中的replace方法，第一个参数，出了写一个字符串之外，还可以定义一个正则
// return msg.replace('单纯','邪恶');
// return msg.replace(/单纯/g,'邪恶')
return msg.replace(/单纯/g,param)
})
Vue.filter('test',function(msg) {
return msg+'love'
})
//如何定义一个私有过滤（局部）
var vm = new Vue({
el: '#app',
data: {
msg: '我也是一个单纯的少年，单纯到自己很可爱，我也会喜欢你',
time: new Date(),
},
//定义私有过滤器，过滤器有两个条件[过滤器名称 和 处理函数 ]
filters: {
/*
过滤器调用的时候，采用的是就近原则，
如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
*/
//param = '';es6的初始化值
dateFormat: function(time,param = ''){
var dt = new Date(time);
// yyyy-mm-dd
var y = dt.getFullYear();
// var m = dt.getMonth()+1;
var m = (dt.getMonth()+1).toString().padStart(2,'0');
var d = dt.getDate();
// return y+'-'+m+'-'+d;
//模板字符串
// return `${y}-${m}-${d}`;
if(param.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
var hh = dt.getHours();
var mm = (dt.getMinutes()).toString().padStart(2,'0');
var ss = dt.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
},
methods: { }
})
</script>
</html>
[点击并拖拽以移动]
效果图
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
相关文章
这篇文章主要介绍了vue多页面配置，单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了vue backtop组件的实现完整代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要给大家介绍了基于Vue3+Ts实现父子组件间传值的两种方式,使用v-model+emit传值和使用v-bind+emit传值两种方式,文章通过代码示例介绍的非常详细,感兴趣的同学可以参考阅读2023-09-09
这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了为大家函数式组件劫持替代json封装element表格的过程思路及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue router带参数页面刷新或回退参数消失的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue中上传视频或图片或图片和文字一起到后端的解决方法，需要的朋友可以参考一下2019-12-12
这篇文章主要介绍了vue项目中Toast字体过小，没有边距的解决方案。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论