1、私有过滤器filters如何定义
通过Vue的过滤器方法Vue.filter('过滤器名', function(args){})进行定义
定义私有过滤器的语法如下：
new Vue({
el
: '.app',
data
: {},
filters
: {
'chgLowerCase': function(val
){
return val
.toLowerCase();
},
'setNumber': function(val
){
return val
.replace(/[0-4]/g, '6');
},
},
})
2、如何调用私有过滤器filters
定义成功后，在需要使用的地方(过滤变量)使用{{ user|toLowerCase }}进行调用
3、实例代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_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>{{ user|chgLowerCase }}
</span><br />
<span>{{ number|setNumber }}
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
var app = new Vue({
el: '.app',
data: {
user: '',
number: '',
},
filters: {
'chgLowerCase': function(val){
return val.toLowerCase();
},
'setNumber': function(val){
return val.replace(/[0-4]/g, '6');
},
},
})
</script>
</html>
