Vue中的过滤器
一、什么是过滤器?
- 用来格式化数据的一个函数
- vue 1.x 版本借鉴了 angular , 提供 10 个过滤器, 包括有: 日期 小数点位数保留 货币 大小写 等
- Vue 2.x 废弃了这 10个过滤器,但是它提供了自定义过滤器的方式
二、使用方式
- 全局定义过滤器
<body>
<div id="app">
<p> {{ time | timeFilter('=')}} </p>
</div>
</body>
<script>
/*
Vue.filter( 过滤器的名称, 过滤器的回调函数 )
*/
Vue.filter('timeFilter',function ( val,type ) {
console.log( val )
//val 就是我们获得的数据
// return newVal return 的结果就是格式化之后的新数据 return的结果就是页面呈现的结果
var date = new Date ( val )
// 2019-6-26 2019/6/26
return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
})
new Vue({
el: '#app',
data: {
time: Date.now()
}
})
</script>
- 局部定义过滤器
<body>
<div id="app">
<p> {{ time | timeFilter('=')}} </p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
time: Date.now()
},
filters: { //过滤器的配置项
'timeFilter': function ( val,type ){
var date = new Date ( val )
return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
}
}
})
</script>
-
过滤器要想获得我们的数据,要通过一个叫做 ”管道符 | “的来获取数据
-
过滤器是对已经有的数据进行格式化,也就是必须先有数据,再去格式化