vue属性 filter过滤器
vue 1.x 版本借鉴了 angular , 提供 10 个过滤器, 包括有: 日期 小数点位数保留 货币 大小写 等
Vue 2.x 废弃了这 10个过滤器,但是它提供了自定义过滤器的方式
自定义过滤器
定义过滤器有两种方式,第一种是全局过滤器,我们可以直接在vue对象上使用filter方法注册过滤器,这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用,接下来我们使用这两种方式注册过滤器函数。
过滤器要想获得我们的数据,要通过一个叫做 ‘管道符 | ’ 来获取数据
过滤器是对已经有的数据进行格式化,也就是必须先有数据,再去格式化
全局过滤器
<body>
<div id="app">
{{ msg | msgfilter('-') }}
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.filter('msgfilter',function(val,type){
let year = val.getFullYear()
let month = (val.getMonth()+1)
let day = val.getDate()
return year + type + month + type + day;
})
let time = Date.now();
time = new Date (time);
new Vue({
el: "#app",
data: {
msg: time
}
})
</script>
局部过滤器
<body>
<div id="app">
{{ msg | msgfilter('-') }}
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
let time = Date.now();
time = new Date (Date.now());
new Vue({
el: "#app",
data: {
msg: time
},
filters:{
'msgfilter': function(val,type){
let year = val.getFullYear()
let month = (val.getMonth()+1)
let day = val.getDate()
return year + type + month + type + day;
}
}
})
</script>