前言
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部
一.全局过滤器
1.在创建 Vue 实例之前全局定义过滤器:
Vue.filter("过滤器名称",function(v){});
v 是当前过滤器的调用者被处理的数据,自带参数,在视图中使用过滤器{{msg|‘过滤器的名称’}}
2 .代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue全局过滤器</title>
</head>
<body>
<div id="app">
<p>{{msg|toUpper}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
Vue.filter('toUpper',function(v){
return v.charAt(0).toUpperCase()+v.substr(1);
});
var vm = new Vue({
el:"#app",
data:{
msg:"abcd",
},
methods:{
}
});
</script>
二.Vue局部过滤器
1.用法
1.通过filter 选项定义过滤器fliter:{‘过滤器名称’:function(v){ return 返回v处理结果 }}
2.在视图中{{msg|'过滤器名称}}
2.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue局部过滤器</title>
</head>
<body>
<div id="app">
<p>{{msg|toUpper}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"abcd",
},
methods:{
},
filters:{
"toUpper":function(v) {
return v.charAt(0).toUpperCase()+v.substr(1);
}
}
});
</script>
总结
学习vue基础之过滤器