1.过滤器一般用于格式化文本,如果是多个过滤器,直接串联即可!{{msg|uppercase|addString}}
实现效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器Filters</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#test',
data:{
msg:'Hello World!',
},
filters:{
uppercase:function(value){
if(!value) return '';
value = value.toString();
return value.toUpperCase();
},
addString:function(value){
if(!value) return "";
value=value.toString()+" filters test";
return value;
}
}
})
}
</script>
</head>
<body>
<div id="test">
{{msg|uppercase|addString}}
</div>
</body>
</html>
2.自定义过滤器(允许自定义参数)
样式效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器Filters</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm2 = new Vue({
el:'#test2',
data:{
msg:'Hello World!',
},
filters:{
addTest:function(value,a,b){
if(!value) return '';
value = value.toString();
return a+value+b;
}
}
});
}
</script>
</head>
<body>
<div id="test2">
{{msg|addTest("start","end")}}
</div>
</body>
</html>