一 . 注意事项
1> 过滤器就是对数据中的文本进行格式化或处理
2> 过滤器中的方法必须有返回值
3> 过滤器一般常用在插值表达式或者v-bind中
4> 过滤器分为全局过滤器和局部过滤器
5> 全局过滤器使用 Vue.filter(过滤器名称,function(){})
6> 全局过滤器一定要定义在所有vue实例之前
二 . vue中的过滤器分为两种:局部过滤器和全局过滤
1) 以时间为例子 传入参数 (全局过滤器的使用)
<div id="app"> <p>{{time|formatDate}}</p> </div> <script> // 全局过滤器 Vue.filter('formatDate', function(t) { var m = Math.floor(t / 1000 / 60) console.log(m) var s = Math.floor(t - m * 60000) / 1000 console.log(s) m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; return m + ':' + s }) var vm = new Vue({ el: '#app', data: { time: 2805000 }, methods: {}, filters: { /* formatDate(t){ var m = Math.floor(t/1000/60) var s = Math.floor(t-m*60000)/1000 m = m<10 ? '0'+m : m; s = s<10 ? '0'+s : s; return m + ':' + s } */ } }) </script>
2) 以时间为例子 传入参数 (局部过滤器的使用)
<div id="app"> <p>{{time|formatDate}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { time: 2805000 }, methods: {}, filters: { formatDate(t) { var m = Math.floor(t / 1000 / 60) var s = Math.floor(t - m * 60000) / 1000 m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; return m + ':' + s } } }) </script>