Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



gvt salon 03 过滤器

2018-09-14 » 没填完的坑 / Tutorial , Vuejs , 环境搭建

基础

用于一些常见的文本格式化, 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示

使用 filter

  • 在 template 中使用
<div>{{ message | filterA }}</div>

<!-- Vuejs > 2.1.0 -->
<div v-bind="message | filterA"></div>
  • 在 js 中使用
this.$options.filters.filterA(message)

定义 filter

  • 在组件选项中定义本地过滤器
Vue.component("component", {
    filters: {
        filterA: function (value) {
            if (!value) return ""
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
})
  • 创建 Vue 实例之前全局定义过滤器
Vue.filter("filterA", function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

串联多个 filter

<!-- message => filterA(message) => filterB(returned_from_filterA) -->
<div>{{ message | filterA | filterB }}</div>

<!-- Vuejs > 2.1.0 -->
<div v-bind="message | filterA | filterB"></div>

接收参数

<div>{{ message | filterC("arg1", "arg2") }}</div>
Vue.filter("filterC", function (value, arg1, arg2) {
    // 第一个参数为 message
    // 之后的参数为自定义参数
})

实战

# 新建 filters/index.js 文件
touch ./src/filters/index.js
// 在 index.js 中定义 3 个 filter

export const function filterA(value){ // do something }

export const function filterB(value){ // do something }

export const function filterC(value){ // do something }
# 新建 main.js 文件
touch ./src/main.js
// 全局注入所有过滤器

// BAD
import { filterA, filterB, filterC } from "./filters"
Vue.filter("filterA", filters.filterA)
Vue.filter("filterB", filters.filterB)
Vue.filter("filterC", filters.filterC)

// GOOD
import * as filters from "./filters"
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})
展开选填信息