Vue3已经没有过滤器的功能了,需要做此功能需要用到方法来做
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>