vue 过滤器基本用法
理解：不改变data的数据格式，在界面显示处理后的数据格式
比如：对数组中的日期进行截取
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table >
<tr v-for="item in list">
<td>{{item.name | filter}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:[{'name':'2019-02-08TT00:00'},
{'name':'2019-02-09TT01:00'},
{'name':'2019-02-10TT02:00'},
{'name':'2019-02-11TT03:00'}
]
},
filters:{
filter(value){
return value.match(/(\S*)TT/)[1]
}
}
})
</script>
</body>
</html>
封装过滤器filter如下：
在vue-cli脚手架里面的src文件下面的components中创建一个filter.js文件:
然后在filter里面写入过滤器方法:
//过滤器
function formatStata(status) {
const statusMap = {
1: '一般级',
2: '较重要级',
3: '重要级',
4: '关键级',
};
return statusMap[status]
}
function statusColor(status){
const statusMap = {
1: '#07B3A1',
2: '#FFB902',
3: '#F4823F',
4: '#F43F3F',
};
return 'background: '+statusMap[status]
}
function statusColors(status){
const statusMaps = {
'一般级': '#07B3A1',
"较重要级": '#FFB902',
"重要级": '#F4823F',
"关键级": '#F43F3F',
};
return 'background: '+statusMaps[status]
}
export { formatStata, statusColor ,statusColors };
在main.js文件中：
// 全局注册过滤器
import * as filters from './components/filter.js';
// console.log(filters[key]);
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
});
然后就可以在全局使用过滤器了：
{{scope.row.fileSensitiveLevel | formatStata}}