版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/85598971
Vue过滤器简介
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器分为全局过滤器和私有过滤器。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由管道 “|” 符号指示 ；
定义全局过滤器：
全局过滤器对所有的vue对象实例都是有效的
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg | msgFormat}}</p> <!--不带参数的过滤器-->
<p>{{msg | msgFormat2('单纯','可爱')}}</p> <!--带参数的过滤器-->
<p>{{gender.toString() | msgFormat2('1','男') }}</p>
<input type="text" v-bind:value="gender.toString() | msgFormat2('1','男') "/>
</div>
<script>
//定义个Vue全局过滤器，名字叫msgFormat
//关于function参数的介绍如下：
//参数msg是 <p>{{msg | msgFormat}}</p>中的msg
Vue.filter("msgFormat", function (msg) {
//return msg.replace('单纯', '调皮'); //这样只能替换最最前面的那个“调皮”后面的单纯无法替换
//replace支持正则，第一个参数除了可以写一个字符串外，还可以定义一个正则，所以我们可以用正则来替换
//正则简写
//return msg.replace(/单纯/g, '调皮')
//正则详写
var reg = new RegExp("单纯", 'g');//g表示全局匹配
return msg.replace(reg, "调皮");
})
//定义个Vue全局过滤器，名字叫msgFormat2
//关于function参数的介绍如下：
//第一个参数是 <p>{{msg | msgFormat2('单纯','可爱')}}</p>中的msg
//第二个参数是 <p>{{msg | msgFormat2('单纯','可爱')}}</p>中的msgFormat2方法的第一个参数
//第二个参数是 <p>{{msg | msgFormat2('单纯','可爱')}}</p>中的msgFormat2方法的第二个参数
Vue.filter("msgFormat2", function (msg, souParam, resParam) {
var reg = new RegExp(souParam, 'g');//g表示全局匹配
return msg.replace(reg, resParam);
})
var vm = new Vue({
el: "#app",
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问题，谁是这个世界上最单纯的人',
gender:1
},
methods: {
}
})
</script>
</body>
</html>
案例：定义个全局过滤器，用来格式化日期
<html>
<head>
<script src="~/Scripts/vue.js"></script>
<!--moment日期格式化的库：地址：momentjs.cn-->
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
</head>
<body>
<div id="app">
<h2>显示格式化的日期时间</h2>
<p>{{ dataTime | dataFormat2}}</p> <!--不带参数的过滤器-->
<p>完整版：{{dataTime | dataFormat3}}</p> <!--dataFormat3中设定默认就是完整的时间格式-->
<p>年月日：{{dataTime | dataFormat3('YYYY-MM-DD')}}</p> <!--带参数的过滤器-->
<p>年月日：{{dataTime | dataFormat3('YYYY年MM月DD日')}}</p> <!--带参数的过滤器-->
<p>时分秒：{{dataTime | dataFormat3('HH:mm:ss')}}</p> <!--带参数的过滤器-->
</div>
<script>
//定义个Vue全局过滤器，名字叫dataFormat
Vue.filter("dataFormat", function (dataStr) {
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDay()-1;
//return y + '-' + m + '-' + d;
//js使用占位符替换字符串是一个ES6中的模版字符串语法。 在``中使用 ${}
//``是Tab键上面的那个键
//return `${y}-${m}-${d}`; //值为2019-1-3
//假设我们想得到的值为 2019-01-03呢？这就涉及到一个不满足2位补0的问题
//在ES6中的字符串新增了两个方法
//String(prototype, padStart(maxLength, fillString = '')) 在字符串的前面补数据
//String(prototype, padEnd(maxLength, fillString = '')) 在字符串的后面补数据
var newM = m.toString().padStart(2, '0');
var newD = d.toString().padStart(2, '0');
return `${y}-${newM}-${newD}`; //这样就得到了我们的需要的格式：2019-01-03
})
//定义个Vue全局过滤器，名字叫dataFormat2
Vue.filter("dataFormat2", function (dataStr) {
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = (dt.getDay()-1).toString().padStart(2, '0');
return `${y}-${m}-${d}`; //这样就得到了我们的需要的格式：2019-01-03
})
//定义个Vue全局过滤器，名字叫dataFormat3
//根据我们自己定义的模板来格式化日期（moment函数是引用的moment.js中的函数）
Vue.filter("dataFormat3", function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})
var vm = new Vue({
el: "#app",
data: {
dataTime: new Date()//dataTime的值的格式为："2019-01-02T06:10:01.971Z" 格式的，所以需要格式化下
},
methods: {
}
})
</script>
</body>
</html>
定义私有过滤器
私有过滤器，只能作用于vue实例所绑定的el元素
<html>
<head>
<script src="~/Scripts/vue.js"></script>
<!--moment日期格式化的库：地址：momentjs.cn-->
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
</head>
<body>
<div id="app">
<h2>显示格式化的日期时间</h2>
<!--dataFormat过滤器可带参数，也可以不带参数，默认是完整的日期格式'YYYY-MM-DD HH:mm:ss'-->
<p>完整版：{{dataTime | dataFormat}}</p>
<p>年月日：{{dataTime | dataFormat('YYYY-MM-DD')}}</p> <!--带参数的过滤器-->
<p>年月日：{{dataTime | dataFormat('YYYY年MM月DD日')}}</p> <!--带参数的过滤器-->
<p>时分秒：{{dataTime | dataFormat('HH:mm:ss')}}</p> <!--带参数的过滤器-->
<p>年月日：{{dataTime|dataFormat2}}</p> <!--不带参数的过滤器-->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
dataTime: new Date()//dataTime的值的格式为："2019-01-02T06:10:01.971Z" 格式的，所以需要格式化下
},
methods: {
},
filters: { //filters中是定义我们的私有过滤器的地方
//定义一个名字为dataFormat过滤器
dataFormat: function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
},
//定义一个名字为dataFormat2过滤器
dataFormat2: function (dataStr) {
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = (dt.getDay() - 1).toString().padStart(2, '0');
return `${y}-${m}-${d}`;
}
}
})
</script>
</body>
</html>