Vue中过滤器的使用和注意事项
vue中过滤器的使用
- 什么是过滤器
- 过滤器的使用
-
- 格式
- 语法
- 全局过滤器
-
- 1、无参数用法
- 2、带参数用法
- 3、多个过滤器嵌套使用
- 4、全局过滤器的好处
- 私有过滤器
-
- 1、语法
- 2、就近原则
- 3、注意点
什么是过滤器
概念：vue.js允许你自定义过滤器，可用于一些常见的文本格式化。过滤器可以使用在2个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
过滤器的使用
格式
调用过滤器时的格式：{{name | 过滤器的名称}}
语法
过滤器的定义语法：
Vue.filter('过滤器的名称',function(){});
全局过滤器
1、无参数用法
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<p>{{msg | msgFormat}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个全局过滤器
Vue.filter('msgFormat', function (msg) {
return msg.replace(/葡萄/g, '西瓜');
});
var app = new Vue({
el: "#app",
data: {
msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
},
methods: {
}
});
</script>
</body>
</html>
运行如下：
2、带参数用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<p>{{msg | msgFormat('香蕉')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个全局过滤器
Vue.filter('msgFormat', function (msg, arg) {
return msg.replace(/葡萄/g, arg);
});
var app = new Vue({
el: "#app",
data: {
msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
},
methods: {
}
});
</script>
</body>
</html>
运行如下：
当然，也可以带多个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<p>{{msg | msgFormat('香蕉','棒棒锤')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个全局过滤器
Vue.filter('msgFormat', function (msg, arg1, arg2) {
return msg.replace(/葡萄/g, arg1 + arg2);
});
var app = new Vue({
el: "#app",
data: {
msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
},
methods: {
}
});
</script>
</body>
</html>
运行如下：
3、多个过滤器嵌套使用
语法：{{msg | 过滤器1 | 过滤器2}}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<p>{{msg | msgFormat('香蕉','棒棒锤') | end}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个全局过滤器
Vue.filter('msgFormat', function (msg, arg1, arg2) {
return msg.replace(/葡萄/g, arg1 + arg2);
});
Vue.filter('end', function (msg) {
return msg + '猪皮怪';
});
var app = new Vue({
el: "#app",
data: {
msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
},
methods: {
}
});
</script>
</body>
</html>
运行如下：
4、全局过滤器的好处
在所有的VM实例中都可以使用全局过滤器。
私有过滤器
1、语法
在创建VM对象的时候使用filters创建私有过滤器，私有过滤器也是一个对象，里面可以定义多个过滤器函数。
var app2 = new Vue({
el: "#app2",
data: {
date: new Date()
},
methods: {},
filters: { //定义私有过滤器（局部）
dateFormat: function (dateStr, pattern = '') {
console.log(1111);
var date = new Date(dateStr);
var y = date.getFullYear();
var m = (date.getMonth() + 1).toString().padStart(2, 0);
var d = date.getDate().toString().padStart(2, 0);
if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
return y + '-' + m + '-' + d + '（私有过滤器）';
} else {
var hh = date.getHours().toString().padStart(2, 0);
var mm = date.getMinutes().toString().padStart(2, 0);
var ss = date.getSeconds().toString().padStart(2, 0);
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss + '（私有过滤器）';
}
}
}
});
2、就近原则
当私有过滤器和全局过滤器同名时，根据就近原则，vm实例会优先选择私有过滤器。
3、注意点
私有过滤器:filters是复数，一个私有过滤器对象可以声明多个function；
全局过滤器Vue.filter是单数，每次只能一个一个声明。