1. 理解过滤器
- 功能: 对要显示的数据进行特定格式化后再显示
- 注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div>{
{myData | filterName}}</div>
<div>{
{myData | filterName(arg)}}</div>
示例
<body>
<div id="demo">
<h2>显示格式化的日期时间</h2>
<p>{
{date}}</p>
<p>完整版：{
{date | dateString}}</p>
<p>年月日：{
{date | dateString('YYYY-MM-DD')}}</p>
<p>时分秒：{
{date | dateString('HH:mm:ss')}}</p>
</div>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script>
Vue.filter('dateString', function(value, format='YYYY-MM-DD HH:mm:ss'){
return moment(value).format(format);
});
new Vue({
el: '#demo',
data: {
date: new Date()
}
})
</script>
</body>
moment.js
其中使用到了moment.js
中文网 http://momentjs.cn/
引入
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
用法
- 日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 一月 25日 2021, 9:51:41 晚上
moment().format('dddd'); // 星期一
moment().format("MMM Do YY"); // 1月 25日 21
moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021
moment().format(); // 2021-01-25T21:51:41+08:00
- 相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 9 年前
moment("20120620", "YYYYMMDD").fromNow(); // 9 年前
moment().startOf('day').fromNow(); // 1 天前
moment().endOf('day').fromNow(); // 2 小时内
moment().startOf('hour').fromNow(); // 1 小时前
- 日历时间
moment().subtract(10, 'days').calendar(); // 2021/01/15
moment().subtract(6, 'days').calendar(); // 上星期二21:51
moment().subtract(3, 'days').calendar(); // 上星期五21:51
moment().subtract(1, 'days').calendar(); // 昨天21:51
moment().calendar(); // 今天21:51
moment().add(1, 'days').calendar(); // 明天21:51
moment().add(3, 'days').calendar(); // 下星期四21:51
moment().add(10, 'days').calendar(); // 2021/02/04
- 多语言支持
moment.locale(); // zh-cn
moment().format('LT'); // 21:51
moment().format('LTS'); // 21:51:41
moment().format('L'); // 2021/01/25
moment().format('l'); // 2021/1/25
moment().format('LL'); // 2021年1月25日
moment().format('ll'); // 2021年1月25日
moment().format('LLL'); // 2021年1月25日晚上9点51分
moment().format('lll'); // 2021年1月25日 21:51
moment().format('LLLL'); // 2021年1月25日星期一晚上9点51分
moment().format('llll'); // 2021年1月25日星期一 21:51