过滤器:
- 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> {{ money | num('$',3) }} </p>
</div>
</body>
// 全局声明
<script>
Vue.filter( 'num', function ( val,type, ge ) {
return `${ type } ${ val.toFixed(ge) }`
})
new Vue({
el: '#app',
data: {
money: 666.9999
}
})
</script>
</html>