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>
[点击并拖拽以移动]
效果图
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对小牛知识库的支持。如果你想了解更多相关内容请查看下面相关链接
-
本文阐述Apache中过滤器的用法。 Apache 2 中的过滤器 相关模块 相关指令 mod_filter mod_deflate mod_ext_filter mod_include mod_charset_lite FilterChain FilterDeclare FilterProtocol FilterProvider AddInputFilter AddOutputFilter Re
-
过滤器用于修改特定文件，Hexo 将这些文件依序传给过滤器，而过滤器可以针对文件进行修改，这个概念借鉴自 WordPress。 概要 hexo.extend.filter.register(type, function() { // User configuration const { config } = this; if (config.external_link.enable)
-
本文向大家介绍在vue中使用公共过滤器filter的方法，包括了在vue中使用公共过滤器filter的方法的使用技巧和注意事项，需要的朋友参考一下 平时我们在vue中使用过滤器时，在模板中定义的过滤器不能在其他模板中使用，所以要在每个模板中定义自己的filter，这样就会出现很多重复的代码，那有没有办法定义一个公用的filter，减少代码的重复呢？ 下面就给大家展示下使用最多且有效的方法吧! •首
-
从本章开始，我们学习SVG的一些高级功能，包括过滤器（Filter）、渐变（Gradient）。SVG还支持动画特性，但我们推荐使用CSS3的动画，所以这里不做讲解。 SVG 过滤器元素 SVG过滤器（也称为滤镜）用来给SVG图形添加特效，和PS软件中的滤镜效果类似。SVG中可用的过滤器元素包括： <feBlend> - 图片混合 <feColorMatrix> - 颜色变换 <feCompone
-
丰富的过滤器插件的存在是 logstash 威力如此强大的重要因素。名为过滤器，其实提供的不单单是过滤的功能。在本章我们就会重点介绍几个插件，它们扩展了进入过滤器的原始数据，进行复杂的逻辑处理，甚至可以无中生有的添加新的 logstash 事件到后续的流程中去！
-
本文向大家介绍详解Angularjs filter过滤器，包括了详解Angularjs filter过滤器的使用技巧和注意事项，需要的朋友参考一下 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，a