Vue 过滤器使用

怼烎@ 2022-03-15 09:12 334阅读 0赞

## 1、过滤器 ##

##### 1.1 过滤器科用在两个地方：**双花括号插值** 和 **v-bind 表达式** 中。过滤器应该被添加在js表达式的尾部，由**管道符号**指示 #####

// 双花括号中 { { message | capitalize }} // 在v-bind 中 <div v-bind:id=" rawId | formatId"></div>

#### 1.2 定义过滤器 ####

###### 1.2.1在组件选项中定义本地过滤器 ######

**注意**：过滤器的内容由过滤器的返回值决定

// 参数1：表示要过滤的内容 // 参数2：表示传递给过滤器的格式 filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }

###### 1.2.2在创建Vue实例前定义全局过滤器 ######

// 参数1：过滤器名称 // 参数2：过滤器的逻辑 Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue({ // ... })

抽出filter过滤器作为全局过滤器

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

###### 1.2.3过滤器串联 ######

// message 的值将作为 参数 传入到函数 filterA 中，然后再将 filterA 的结果作为 参数 传递到 filterB 中 { { message | filterA | filterB }}

###### 1.2.4 接收多个参数的过滤器 ######

// filterA 被定义为接收三个参数的过滤器，其中 message、arg1、arg2作为表达式的三个参数 { { message | filterA(arg1, arg2) }}

#### 1.3抽离过滤器，定义到当个文件中 ####

###### 1.3.1 抽离过滤器到当个文件夹中 ######

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

###### 1.3.2 在组件js中引入过滤器 ######

import * as custom from './common/filters/custom' // 导出的是对象，可以直接通过 key 和 value 来获得过滤器的名和过滤器的方法 Object.keys(custom).forEach(key => { Vue.filter(key, custom[key]) })

###### 1.3.3 Vue组件中使用过滤器 ######

<template>
      <section class="content">
        <p>{
        { time | dateServer }}</p> 
      </section>
    </template>
    <script> export default { data () { return { time: 20160101 } } } </script>