局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{money|contect("$")}}
{{money|add(100)|contect("$")}}
</div>
<script>
const vm=new new Vue({
el:"#app",
data:{
money:100
},
filters: {
add:function(value,value2){
return value+value2;
},
contect:function(value,symbol){
return value+symbol;
},
}
});
</script>
</body>
</html>
使用filters进行定义过滤器。使用过滤器语法 {{data|filter(arg)}}, data表示的是数据,|表示后面调用的是过滤器filter是过滤器的名称,过滤器的第一个参数是data,后面的参数是我们要传递到过滤器的参数。一个data也可以调用多个过滤器。
全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{money|add(100)|globalContect("@")}}
</div>
<script>
Vue.filter("globalContect",function(value,symbol){
return value+symbol;
});
const vm=new new Vue({
el:"#app",
data:{
money:100
},
filters: {
add:function(value,value2){
return value+value2;
}
}
});
</script>
</body>
</html>
全局过滤器是要将其定义在Vue下,语法 Vue.fileter(“name”,function) name是定义的过滤器的名称,function是过滤器的具体实现。