vue filter过滤器

最新推荐文章于 2024-10-18 15:58:53 发布

Miss_Mr_Rui

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量80

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a791226606/article/details/128420689

版权

局部过滤器

<template>
  <div>
   <span>{{ time | timeFormater('YYYY_MM_DD') | mySlice }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time:Date.now()
    };
  },
  // 局部过滤器
  filters:{
    // 第一个参数默认为需要处理的数据(此处为time)
    timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
      return dayjs(value).format(str)
    },
    mySlice(value){
      return value.slice(0,4)
    }
  }
};
</script>

全局过滤器

<template>
  <div>
   <span>{{ time | timeFormater('YYYY_MM_DD') | mySlice }}</span>
  </div>
</template>

<script>
import Vue from 'vue';
// 全局过滤器（一般写在main.js中，或者插件中）
Vue.filter('timeFormater',(value,str='YYYY年MM月DD日 HH:mm:ss')=>{
  return dayjs(value).format(str)
})
Vue.filter('mySlice',(value)=>{
  return value.slice(0,4)
})
export default {
  data() {
    return {
      time:Date.now()
    };
  }
};
</script>