过滤器
vue 1.x内部提供提供了 10 个过滤器, 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化
什么叫过滤器?
格式化数据的一个工具
举例: 12.22225 ---> 12.2
Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) -- > 2019/05/28
过滤器一样也有两种声明形式
全局声明
Vue.filter(过滤器名称,回调函数) 回调函数中有一个参数value
value值就表示的是格式化数据的值
局部声明
new Vue({
filters: {
'过滤器名称': function( value ){
return
}
}
})
过滤器的回调函数必须有返回值
如何使用使用过滤器?
我们用一个叫做管道符的来使用过滤器
举例:
数据 | 过滤器名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p> {{ time | date('*') }} </p>
<p> {{ time | time('*') }} </p>
<input type="text" v-model = 'mon'>
<p>{{ mon | money}}</p>
<input type="text" v-model = 'upper'>
<p>{{upper | upperCase}}</p>
<input type="number" v-model = 'numb'>
<p>{{numb | tonum}}</p>
</div>
</body>
<script>
Vue.filter( 'date', function ( val,type ) {
var date = new Date( val )
return `¥${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
})
Vue.filter('money',function( val ){
return `¥${val}`
})
Vue.filter('upperCase',function(val){
return val.toUpperCase()
})
Vue.filter('tonum',function(val){
var num =parseFloat(val)
return num.toFixed(2)
})
new Vue({
el: '#app',
data: {
time: Date.now(),
mon:10,
upper:'aa',
numb:10
},
filters: {
'time': function( val,type ){
var date = new Date( val )
return `¥${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
}
}
})
</script>
</html>