vue-过滤器

原创已于 2023-04-15 14:07:24 修改 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-04-15 14:06:53 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

文章展示了Vue中如何使用过滤器进行数据格式化，特别是在时间格式化方面的应用。通过全局和局部过滤器的定义，以及在v-bind和插值表达式中的使用，配合dayjs库展示了时间的多种格式化方法。同时，提到了过滤器可以串联使用，并且不会改变原始数据，只会生成新的处理结果。

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

vue允许定义过滤器，对于一些文本常见格式化。过滤器可以用在两个地方

-（1）v-bind 表达式

-（2）{{}}插值表达式

使用：使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

注册：Vue.filter(name,callback) 或 new Vue{filters:{}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
  <!-- 准备好一个容器-->
<div id="root">
  <h2>显示格式化后的时间</h2>
  <!-- 计算属性实现 -->
  <h3>现在是：{{ fmtTime }}</h3>
  <!-- methods实现 -->
  <h3>现在是：{{ getFmtTime() }}</h3>
  <!-- 过滤器实现 -->
  <h3>现在是：{{time | timeFormater}}</h3>
  <!-- 过滤器实现（传参） -->
  <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<script type="text/javascript">

  //全局过滤器
  Vue.filter('mySlice',function(value){
      return value.slice(0,4)
  })

  new Vue({
      el:'#root',
      data:{
          time:Date.now(), //时间戳
          msg:'你好，尚硅谷'
      },
      // 计算属性
      computed: {
          fmtTime(){
              return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
          }
      },
      // 方法
      methods: {
          getFmtTime(){
              return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
          }
      },
      //局部过滤器
      filters:{
          timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
              // console.log('@',value)
              return dayjs(value).format(str)
          }
      }
  })
</script>
</body>
</html>