<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
<title>过滤器</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app" v-cloak></div>
<script src="js/vue.js"></script>
<script>
//注册全局过滤器
Vue.filter("increase",function(value,num1,num2){
// console.log(value);
return value+num1+num2;
});
let PublicComp={
template:`
<div>我是公共组件 计数器:{{count|increase(10,20)}}</div>
`,
data(){
return {
count:1
}
}
};
//全局组件注册
Vue.component("PublicComp",PublicComp);
//首页
let HomePage={
template:`
<div>
{{title}}<br/>
日期:{{'2019-09-21'|formatDate}}
<PublicComp></PublicComp>
</div>
`,
data(){
return {
title:"我是首页"
}
},
//局部过滤器
filters:{
formatDate(value){
// console.log(value);
var values=value.split("-");
// console.log(values);
return values[0]+"年"+values[1]+"月"+values[2]+"日";
}
}
};
//新闻页面
let NewsPage={
template:`
<div>
新闻页面,金额:{{total|increase(10,110)}}
<PublicComp></PublicComp>
</div>
`,
data(){
return {
total:10
}
}
};
//入口组件
let App={
template:`
<div>
<HomePage></HomePage>
<NewsPage></NewsPage>
</div>
`,
//局部组件注册方式
components: {
HomePage,
NewsPage
}
};
new Vue({
el:"#app",
template:`
<App></App>
`,
components:{
App
}
})
</script>
</body>
</html>
vue过滤器的使用
于 2020-10-18 23:28:41 首次发布