vue 过滤器 filter
一、什么是过滤器？
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
比如讲字符串格式化为首字母大写，讲日期格式化为指定的格式等。
二、vue 过滤器 filter 的使用
1、vue 定义过滤器
vue 全局过滤器
Vue.filter('过滤器名称', function (value1[,value2,...] ) {
//逻辑代码
})
vue 局部过滤器
new Vue({
filters: {
'过滤器名称': function (value1[,value2,...] ){
// 逻辑代码
}
}
})
2、vue 过滤器的使用
双花括号插值
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div> <!--使用 | 可以连续过滤 -->
v-bind表达式
<div v-bind:id="id | lower"></div>
vue 过滤器是添加在 js 表达式的尾部，中间由“|”(管道)符号 来进行连接
vue 双花括号插值 过滤器的使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 过滤器 filter xinbiancheng.cn</title>
</head>
<body>
<div id="app">
<!-- vue 双花括号插值的方式实现过滤 -->
<!-- 实现首字母大写 -->
<div>{{msg | upper}}</div>
<!-- 实现首字母大写在小写 -->
<div>{{msg | upper | lower}}</div>
<!--使用 | 可以连续过滤 -->
</div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
/*
vue 定义全局过滤器
*/
Vue.filter('upper', function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});
Vue.filter('lower', function (val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: {
msg: 'welcome to xinbiancheng.cn'
}
})
</script>
</html>
vue v-bind表达式 过滤器的使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 过滤器 filter xinbiancheng.cn</title>
</head>
<body>
<div id="app">
<!-- vue v-bind表达式 实现过滤 -->
<!-- 将id的字母大小混合的属性值，实现属性值统一为小写字母 -->
<div v-bind:id="id | lower">vue v-bind表达式 实现过滤</div>
</div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
/*
vue 定义全局过滤器
*/
Vue.filter('lower', function (val) {
return val.toLowerCase();
});
var vm = new Vue({
el: '#app',
data: {
id: 'AbCD'
}
})
</script>
</html>
vue filters 局部过滤器
局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。
其作用的区域也是vue实例【#app】控制的区域,不能在其它vue 的组件中使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 过滤器 filter xinbiancheng.cn</title>
</head>
<body>
<div id="app">
<p>请使用正则表达式，替换掉敏感语句</p>
<p> {{ msg | dataFormat }} </p>
</div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '请不要跟我，说一些敏感的一些话题。'
},
//定义 vue 局部过滤器。只能在当前 vue 对象中使用
filters: {
dataFormat(msg) {
return msg.replace(/敏感/g, '******')
}
}
});
</script>
</html>
通过上面 vue 的 过滤 在 html 中显示的内容为：‘请不要跟我，说一些******的一些话题。’我们发现敏感字已经替换掉了。分析如下：
filters 中 定义了一个局部的过滤器函数，在函数中 使用了字符串的 replace的方法替换敏感字字符串，第一个参数是 /敏感/g 是 正则表达式
vue filter 全局定义 和 filters 局部过滤器（混合实例）
本实例实现的是 小数变成货币的过滤器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 过滤器 filter xinbiancheng.cn</title>
</head>
<body>
<div id="app">
<h2>过滤器的使用-添加前缀</h2>
<p>{{352.11 | toRMB}}</p>
<p>{{657 | toRMB}}</p>
<p>{{657.22 | toFixed }}</p>
<p>{{money | toFixed }}</p>
<p>下面是链式使用，注意先后的顺序，如下面的先添加￥符号再进行小数位变换将会出错，因此要注意先后顺序</p>
<p>{{ money | toFixed | toRMB }}</p>
</div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//vue 过滤器 全局注册
Vue.filter('toRMB', function (value) {
return `￥${value}`
})
new Vue({
el: '#app',
data: {
money: 826.26,
},
//vue 过滤器 局部注册
filters: {
toFixed: function (money) {
return money.toFixed(1)
},
},
})
</script>
</html>
以上这个案例只用到了 JS 的 toFixed() 方法，比较简单，但还是比较实用。
注意：
-
1、vue 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
-
2、vue 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
-
3、vue 过滤器中定义的函数，一定要有返回值。
vue 带参数的过滤器 语法格式
Vue.filter('format', function (value, arg) {
//value 是原始变量的值，arg 是传递的参数
})
vue 带参数的过滤器的使用
<div id="app">
<!-- vue 带参数的过滤器 -->
<p> {{ date | format('yyyy-MM-dd') }} </p>
</div>
vue 带参数的过滤器案例：格式化日期
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 过滤器 filter xinbiancheng.cn</title>
</head>
<body>
<div id="app">
<!-- vue 带参数的过滤器 -->
<p> {{ date | format('yyyy-MM-dd') }} </p>
</div>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
function dateFormat(date, format){} //此地方 dateFormat 是用来定义 格式化日期 过滤器函数
/*
vue 过滤器案例：格式化日期
*/
Vue.filter('format', function (value, arg) {
return dateFormat(value, arg); //vue 过滤器 调用前面的定义好的函数
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
</html>
function dateFormat(date, format){} 函数实现完整代码如下：（此代码已经测试过，大家可以直接复制使用）
<script>
function dateFormat(date, format) {
if (typeof date === 'string') {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
}
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
</script>
这函数主要用的到技术是：正则表达式，Date 相关的函数getMonth() ,getDate()，getHours(),getMinutes()，getSeconds(), getMilliseconds(),Math.floor(),match(),parseInt(),substr()等，这些知识点不是本章重点，需要了解相关的知识，点击链接查看即可。