通过过滤器对 Vue 组件中的模型属性值进行格式化
共 16457字，需浏览 33分钟
·
2021-03-07 14:50
一、过滤器简介
在 Vue 组件中，我们可以通过过滤器对模型属性值进行格式化，注意这里不要望文生义哈，过滤器不是传统的对列表数据按条件进行「过滤」，而是对某个具体属性值进行「过滤」。
我们以上篇教程编写的文章列表组件为例进行演示。
Vue 组件支持全局过滤器和本地过滤器，我们先以文章发布日期格式化为例演示全局过滤器的定义和使用，再以文章状态格式化为例演示本地过滤器的定义和使用。
二、准备工作
文章列表接口数据调整
开始之前，我们先在后台返回的文章列表接口数据中新增 created_at 和 status 两个字段，分别表示文章发布时间和状态：
Route::get('/get_posts', function () {
return [
[
'id' => 1,
'url' => url('/post/1'),
'title' => '测试文章1',
'created_at' => '2019-10-15 17:51:32',
'status' => 0
],
[
'id' => 2,
'url' => url('/post/2'),
'title' => '测试文章2',
'created_at' => '2020-01-21 15:53:06',
'status' => 1
],
[
'id' => 3,
'url' => url('/post/3'),
'title' => '测试文章3',
'created_at' => '2020-09-07 10:31:06',
'status' => 0,
],
[
'id' => 4,
'url' => url('/post/4'),
'title' => '测试文章4',
'created_at' => '2020-05-17 01:29:24',
'status' => 1
],
[
'id' => 5,
'url' => url('/post/5'),
'title' => '测试文章5',
'created_at' => '2020-10-20 15:26:43',
'status' => 1
]
];
});
props 属性传递字段调整
我们将以卡片视图为例进行演示，因为这里可展示字段的空间更大一些。为了避免每次从 PostList 父级作用域传递多个 props 属性到 CardItem，我们将之前逐个传递字段属性的方式调整为传递整个 post 对象：
<CardItem v-for="post in posts" :key="post.id" :post="post">
<template #title>{{ post.title }}</template>
<template #action-label>点击查看</template>
</CardItem>
三、通过全局过滤器定义日期过滤器
接下来，我们先来演示全局日期过滤器的定义和使用。
显示文章发布日期字段
修改 CardItem 组件代码如下以便展示日期字段：
<template>
<div class="col mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><slot name="title"></slot></h5>
<p class="card-text">
<small class="text-muted">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-clock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm8-7A8 8 0 1 1 0 8a8 8 0 0 1 16 0z"/>
<path fill-rule="evenodd" d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
</svg>
{{ post.created_at }}
</small>
</p>
<a :href="post.url" class="btn btn-primary"><slot name="action-label"></slot></a>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['post']
}
</script>
在未使用日期过滤器之前，渲染效果如下：
接下来，我们使用过滤器对日期格式进行格式化。
引入 Moment 包
在此之前，先通过 NPM 安装一个 JavaScript 中功能与 PHP Carbon 包类似的 Moment 包，我们可以使用它提供的 API 对指定日期时间进行格式化：
npm install moment --save
然后在 component-practice/resources/js/app.js 中引入它：
window.moment = require('moment');
日期过滤器的定义和使用
接下来，就可以基于 Moment 提供的 API 在 Vue 实例初始化之前定义一个全局的日期过滤器了，我们将这个过滤器的名称命名为 diff_for_human：
Vue.filter('diff_for_human', datetime => {
return moment(datetime).fromNow();
});
const app = new Vue({
el: '#app'
});
非常简单。这样一来，就可以在 CardItem 组件中应用这个过滤器对日期属性进行格式化了。和 Linux 管道符一致，我们可以在模型属性值上通过 | 连接要使用的过滤器，然后模型属性值会作为第一个参数传递给后面的过滤器函数，最后将函数返回结果作为整个表达式的输出值：
{{ post.created_at | diff_for_human }}
刷新列表视图，切换到卡片视图，可以看到应用日期过滤器后的格式化效果：
五、通过本地过滤器定义状态过滤器
除了全局定义过滤器外，还可以在组件内部定义本地过滤器。
我们以文章状态字段为例进行演示，首先在 CardItem 组件中渲染状态字段：
<style scoped>
.card-text {
vertical-align: middle;
}
.card-text small {
margin-right: 5px;
}
</style>
<template>
<div class="col mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><slot name="title"></slot></h5>
<p class="card-text">
<small class="text-muted">
<svg v-show="post.status === 1" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 0h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z"/>
<path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
</svg>
<svg v-show="post.status === 0" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 0h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z"/>
<path fill-rule="evenodd" d="M6.146 6.146a.5.5 0 0 1 .708 0L8 7.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 8l1.147 1.146a.5.5 0 0 1-.708.708L8 8.707 6.854 9.854a.5.5 0 0 1-.708-.708L7.293 8 6.146 6.854a.5.5 0 0 1 0-.708z"/>
</svg>
{{ post.status === 0 ? '草稿' : '已发布' }}
</small>
<small class="text-muted">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-clock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm8-7A8 8 0 1 1 0 8a8 8 0 0 1 16 0z"/>
<path fill-rule="evenodd" d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
</svg>
{{ post.created_at | diff_for_human }}
</small>
</p>
<a :href="post.url" class="btn btn-primary"><slot name="action-label"></slot></a>
</div>
</div>
</div>
</template>
可以看到，在未使用过滤器之前，我们使用了三元运算符对状态显示文本进行优化，但是这只能应付比较简单的场景，如果文章状态值多于 3 个，代码的可读性就会越来越差，容易出错，如果涉及到一些更复杂的业务逻辑判断，则只能使用更好地方式来处理，比如过滤器。
我们在 CardItem 组件中定义一个本地过滤器 status_human_readable，用于根据不同的文章状态值显示对应的可读性更好的文本，然后将其应用到 post.status 属性值上面：
...
{{ post.status | status_human_readable }}
...
<script>
export default {
props: ['post'],
filters: {
status_human_readable(status) {
switch(status) {
case 0:
return '草稿';
case 1:
return '已发布';
default:
return '未知状态';
}
}
}
}
</script>
可以看到，本地过滤器和全局过滤器只是定义方式不同而已，使用方式完全一致。
刷新列表视图，切换到卡片视图，可以看到如下渲染效果：
关于 Vue 过滤器学院君就简单介绍到这里，更多关于 Vue 过滤器的功能和使用（比如多个过滤器的串联、额外传递过滤器参数等），请参考官方文档。
本系列教程首发在Laravel学院（laravelacademy.org），你可以点击页面左下角阅读原文链接查看最新更新的教程。