vue.js过滤器详解

2020年07月09日 前端开发 79点热度 0人点赞 0条评论

vue.js的过滤器分为局部过滤器和全局过滤器,局部过滤器仅仅只在当前组件可以使用,而全局过滤器则是在所有组件中都能使用,下面来详细的看一下vue.js中的全局过滤和局部过滤器的使用吧。

局部过滤器

export default {
  data () {
    return {}
  },
  filters:{
    orderBy (value){
      // 在这里对值进行一些处理之后再返回
      return value;
    },
    uppercase (value) {
      // 在这里对值进行一些处理之后再返回
      return value;
    }
  }
}

但是我们做项目来说,大部分的过滤器是要全局使用的,不会每每用到就在组件里面去写,嗯,还是抽成全局的会更好些。那么全局的过滤器在实际开发中是怎么写的呢?请看下面的示例代码:

全局过滤器

如何注册全局过滤器(vue.js最基本的全局过滤器的注册方式):

// 注册
Vue.filter('my-filter', function (value) {
    // 返回处理后的值
    return value
}) 
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

一般实战时使用的方式 :

当项目所用到的过滤器比较多时,就想试着把所有的方法定义在一个文件里面导出,嗯,毕竟还是有分点层次的。

1、在src目录下新建一个filters的文件夹,然后再建立filters.js文件

let dateServer = value => {
  return value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')
}
export { dateServer }

2、在项目入口文件main.js中

import * as filters from './filters/filters.js'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

在组件中使用过滤器:

<div id="appMain">
    <div v-html="$options.filters.dateServer (content)"></div>
    <div>{{content | dateServer }}</div>
    <div :style="{'background-image': 'url(' + $options.filters.dateServer(authorInfo.author_bg) + ')'}"></div>
</div>

以上就是今天vue.js教程学习的关于vue.js过滤器的使用。

标签:

Kratos

保持饥渴的专注,追求最佳的品质

文章评论