有的时候，有些数据是半动态的，即数据的一部分是变化的，一部分是固定不变或者也可能能动态，但是这种动态是相对比较少的。那么我可以使用过滤器来对数据进行一步优化过滤。在vue中提供了Vue.filter('flterName',fn)来定义一个过滤器，过滤器可以在HTML代码中使用，如对动态拿到的数据进行过滤，
1.定义过滤器
第一个参数是过滤器的名字
第二个参数是过滤器的功能函数。如果不定义，vue也不知道你这个字符串是什么，有什么作用。
2.过滤器功能函数
第一个参数是传入的要过滤数据，即原数据。
第二个参数开始就是html调用过滤器的时候传入的参数。
vue局部过滤器
一个简单的时间转换案例
<div id="app" v-cloak>
{{ new Date() | time }}
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
filters: {
time(data) {
let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
let h = date.getHours();
let mm = date.getMinutes();
let s = date.getSeconds();
console.log(y, m, d, h, mm, s)
return date = y + '年' + m + '月' + d + '日' + h + '时' + mm + '分' + s + '秒';
}
},
mounted: function() {
}
})
</script>
vue全局过滤器
<div class="demo">
<input type="number" v-model="length">
{{length}}mm => {{length | meter}}
</div>
script
Vue.filter('meter',function(val,unit){
val = val/1000 || 0;
if (val) {
unit = "m";
return val + unit;
}
return;
});
new Vue({
el:'.demo',
data:{
price:'',
length:'',
}
});
