<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="myApp">
{{str|uppercase}}
<br />
扫描二维码关注公众号，回复：
2438157 查看本文章
{{str|firstupper}}
<br />
{{phonenum|phone}}
<div id="herApp">
{{"18703901885"|phone}}
</div>
</div>
</body>
<script type="text/javascript">
//定义全局过滤器
Vue.filter("phone",function(phone){
return phone.replace(phone.substr(3,4),"****");
});
new Vue({
el:"#myApp",
data:{
str:"hello Vue",
phonenum:"15703901802"
},
//局部自定义过滤器
filters:{
uppercase:function(a){
return a.toUpperCase();
},
firstupper:function(a){
return a.slice(0,1).toUpperCase()+a.slice(1);
//或者
// return a.charAt(0).toUpperCase()+a.slice(1);
}
}
})
new Vue({
el:"#herApp"
})
</script>
</html>