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}}