filters过滤器的简单使用

最新推荐文章于 2024-02-06 11:43:29 发布

_阿杰不会写代码_

最新推荐文章于 2024-02-06 11:43:29 发布

阅读量451

点赞数 8

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_54241338/article/details/120800146

版权

本文详细介绍了Vue.js中filters过滤器的基础应用，通过实例展示了如何使用filterDate过滤器将日期格式化为'YYYY-MM-DD HH:mm:ss'格式。在不使用过滤器的情况下，日期显示为原始JavaScript Date对象，而使用过滤器后，日期显示变得友好且易于阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章主要就是介绍了filters过滤器的基础使用,需要的朋友可以参考一下

不使用过滤器的代码:

<template>
 <div>
  <h1>{{date}}</h1> 
 </div>
</template>
<script>
 export default {
  data() {
   return {
    date:new Date()
   }
  }
 }
</script>

效果:

使用了过滤器的代码(需要下载moment.js):

<template>
 <div>
  <h1>{{date | formDate}}</h1> 
 </div>
</template>
<script>
 import moment from 'moment';
 export default {
  data() {
   return {
    date:new Date()
   }
  },
  filters: {
   formDate(date) {
    return  moment(date).format("YYYY-MM-DD HH:mm:ss")
   }
  }
 }
</script>

效果: