1、全局过滤器filter如何定义
通过Vue的过滤器方法Vue.filter('过滤器名', function(args){})进行定义
定义全局过滤器的语法如下：
Vue.filter('filter_name', function(args){ })
2、如何调用全局过滤器filter
定义成功后，在需要使用的地方(过滤变量)使用{{ user|toLowerCase }}进行调用
3、实例代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_vue中全局过滤器的使用
</title>
</head>
<body>
<div class="app">
用户名：
<input type="text" v-model.lazy.trim="user" /><br />
学 号：
<input type="text" v-model.lazy.trim="number" /><br />
// 输入框中的所有大写字母在鼠标失去焦点时在span标签中都显示为小写字母
<span>{{ user|toLowerCase }}
</span><br />
// 输入框中的所有0-4之间的数字在鼠标失去焦点时在span标签中都被替换显示为6
<span>{{ number|setNumber }}
</span><br />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
Vue.filter('toLowerCase', function(val){
return val.toLowerCase();
});
Vue.filter('setNumber', function(val){
return val.replace(/[0-4]/g, '6');
})
var app = new Vue({
el: '.app',
data: {
user: '',
number: '',
},
})
</script>
</html>
