在Vue中当我们想要对一个数值进行处理时（改变格式、大小，类型，过滤等）可以使用filter
Vue过滤器有两种注册方式，全局、或者是局部注册
在一个组件内部想要使用一个不太常用的过滤器，可以局部注册
一、局部注册的过滤器可以直接在组件的选项中定义
export default {
name: 'FilterDemo',
/* 局部过滤器 */
filters: {
/* 格式化时间戳 */
formatDate (val) {
const date = new Date(val);
const year = date.getFullYear();
const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
return `${year}-${month}-${day}`;
console.log(val);
}
},
data () {
return {
}
}
}
2、如果是通用型的过滤器可以考虑全局注册，全局注册过滤器应该在创建 Vue 实例之前全局定义过滤器，可以在main.js中
import Vue from 'vue';
Vue.filter('formatTime', function (val) {
const date = new Date(val);
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
return `${hour} : ${minutes} : ${seconds}`;
});
3、当项目中多次需要使用过滤器时，可以新建filter文件，用以创建项目所需的过滤器
// 像这样
export function toThousandslsFilter(num) {
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}
export function dateFilter(num) {
// 日期格式转换
}
export function lowerFilter(num) {
// 大小写转换
}
// ...
// 可以将项目经常需要用到的过滤器全部定义在此
然后再main.js中全局注册，可以这样写
import * as filters from './filters' // global filters
// register global utility filters.
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
注册完之后就
注册完之后就是调用了
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
// 用户从input输入的数据在回传到model之前也可以先处理
<input type="text" v-model="message | change">
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
