D 源码、知识点 3 vue中的 filters

官方文档： https://cn.vuejs.org/v2/guide/filters.html

 

结合总结一下使用

一 注册声明

//组件内写法

new Vue({
      filters:{
          testFilter2(val){
              console.log("本地过滤器",val);
          }
      }
 })

//全局写法
Vue.filter('testFilter1',function(val){
     console.log("全局过滤器",val);
 })

二：使用

// 在html中使用

{{ message | capitalize }}
//capitalize 过滤器函数将会收到 message 的值作为第一个参数

{{ msg | filter('arg1','arg2') }}
// msg对应函数中的第一个参数data，arg1为第二个参数，类推

{{ message | filterA | filterB }}
//串联使用 表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

//methods中使用，并传参
methods:{
    fn(){
        let filter = this.$options.filters['指令函数名']
        let data = filter(this.msg,arg1,arg2)
    }
}

//在v-html中使用filters
<p v-html="$options.filters.filter(this.msg,arg1,arg2)"></p>

 

项目中 实战使用（基于脚手架）

src 文件下 建立 filter 文件（专门处理全局指令） index.js 书写各个指令函数

main.js 全局注册 这些全局指令

import * as filters from './filters' // global filters

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

某些使用频率低的 单个页面中 ---本地过滤器

...
name: 'InlineEditTable',
filters: {//本地注册了两个指令
    statusFilter(status) {
    const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
    }
    return statusMap[status]
    },
    statusFilter2(){
}
},
data() {
    return {
        list: null,
        listLoading: true,
        listQuery: {
            page: 1,
            limit: 10
        },
        test:'哈哈'
        }
    
},
created() {
    this.getList()
},
...             

 

页面中使用 

//  使用了前面 全局注册的 tt 指令函数
<el-table-column width="100px" label="测试">
        {{ test | tt }}
    </el-table-column>

// 使用本地注册的  statusFilter 指令函数
<el-tag :type="row.status | statusFilter">
            {{ row.status }}
        </el-tag>

// 在method 中  
let tt = this.$options.filters['tt'];
let statusFilter= this.$options.filters['statusFilter']; 

 

 

6666