一、说明
Vue中允许你自定义过滤器，可被用作一些常见文本的格式化。过滤器可以用在两个地方：mustache插值表达式和v-bind指令。过滤器应该被添加在js表达式尾部，由“管道”符指示。用来作输出前最后一次处理，不回去修改原数据。
二、过滤器调用时的格式
//在输出name的值之前，加管道符“|”，调用nameope（即过滤器名称）进行处理，把处理的结果当作内容渲染
{{ name | nameope(arg) }}
三、全局过滤器的定义
所谓的全局，即所有的Vue实例都共享。
//function即处理过程。
//第一个参数data即为数据（管道符“|”前面的数据，即上面的name）；
//第二个参数arg即为过滤器中传入的参数（可多个，即第三个参数。。。）。
Vue.filter('过滤器名称',function(data,arg){});
四、实例
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式输出前调用msgFormat过滤器进行数据处理，可传入参数 -->
<!-- 也可多次调用过滤器，继续加管道符加过滤器名 -->
<p>{{ msg | msgFormat("加油！") | test }}</p>
</div>
<script>
/* 定义一个Vue全局的过滤器 */
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/哈/g,'啊')+arg;
});
Vue.filter('test',function(msg){
return msg+"不要将来后悔！";
});
var vm = new Vue({
el:'#app',
data:{
msg:'哈哈哈哈哈哈，画画好多东西要学啊！'
}
})
</script>
</body>
</html>
五、私有过滤器的定义
定义在Vue对象中，全局和私有重名，优先私有的。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式输出前调用msgFormat过滤器进行数据处理，可传入参数 -->
<!-- 也可多次调用过滤器，继续加管道符加过滤器名 -->
<p>{{ msg | msgFormat("加油！") | test }}</p>
</div>
<div id="app2">
<p>{{ msg | test }}</p>
</div>
<script>
/* 定义一个Vue全局的过滤器 */
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/哈/g,'啊')+arg;
});
Vue.filter('test',function(msg){
return msg+"不要将来后悔！";
});
var vm = new Vue({
el:'#app',
data:{
msg:'哈哈哈哈哈哈，画画好多东西要学啊！'
}
});
var vm2 = new Vue({
el:"#app2",
data:{
msg:'加油多画画少bb！',
},
filters:{
test(msg){
return msg+"努力！有什么事情想做趁年轻！"
}
}
});
</script>
</body>
</html>
网友评论