Javascript

浅谈Vue中过滤器filter的使用{{ 变量名 | 过滤器名 }}

本文主要是介绍浅谈Vue中过滤器filter的使用{{ 变量名 | 过滤器名 }},对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器。

关于 vue 过滤器,在官方文档中是这样说明的:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。

即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进行加工处理并返回处理后的数据,比如做一些数据格式上的修改,状态转换等。

过滤器分为两种

  • 组件内的过滤器(组件内有效)

  • 全局过滤器(所有组件共享)

    定义过滤器
    
        第一个参数是过滤器的名字
    
        第二个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么,有什么作用)。
    
    过滤器的功能函数
    
        声明 function(data,argv1,argv2...){}
    
        第一个参数是传入的要过滤的数据,即调用时管道符左边的内容。
    
        第二个参数开始往后就是调用过滤器的时候传入的参数

    过滤器的使用

    • 先注册,后使用

    • 组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

    • 全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据

    • 使用 {{ 数据 | 过滤器名 }}

          // 使用过滤器时需要添加管道符号( | )作为分隔,管道符 | 右边是过滤器名称,即文本的功能函数
      ​
      <!-- 在双花括号中 -->
      {{ message | 过滤器名称 }}
      ​
      <!-- 在 `v-bind` 中 -->
      <div v-bind:id="id | 过滤器名称"></div>

      下面说一下局部过滤器和全局过滤器的区别:

    •     局部过滤器:
    •  

      data () {
          return {
              msg: 'hello world'
          }
      },
      //定义私用局部过滤器。只能在当前 vue 对象中使用
      filters: {
          dataFormat: (msg, a) => { // msg表示要过滤的数据,a表示传入的参数
              return msg + a;
          }
      }
      ​
      <p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!
    • 自定义全局过滤器:

    • Vue.filter('过滤器名称', function(val) { // val表示要被处理的数据
          // 过滤器业务逻辑,要有返回值
      })
      ​
      <div>{{ msg | 过滤器名称 }}</div>
      <div v-bind="msg | 过滤器名称"></div>

      千万千万千万要注意:

      1. 全局注册时是 filter 没有 s , 而组件过滤器是 filters,是有 s 的,虽然写的时候没有 s 也不报错,但是过滤器是没有效果的。

      2. 当全局过滤器和局部过滤器名字重复的时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用

      3. 一个表达式可以使用多个过滤器,其执行顺序从左往右,前一个过滤器的结果作为后一个过滤器的被处理数据,所以要注意使用顺序
         1 熟悉 vue 的童鞋会知道,过滤器有时同methods、computed、watch一样可以达到处理数据的目的,但又不能替代它们,因为它不能改变原始值。如果一个过滤器的内部特别复杂,可以考虑把它写成一个计算属性,因为计算属性本身带有缓存,可复用性强,而过滤器一般用来做一些简单的操作。
         2 
         3 在实际开发中,全局的过滤器要比局部过滤器使用的更广泛一些,说白了我们为什么要使用过滤器,其实就跟使用函数是一样,把一些方法封装,供其它组件使用,这样调用起来更方便也更快捷。
         4 
         5 大家知道全局过滤器是在 main.js 中定义的,但万一项目过大,有多个过滤器,那 main.js 就一堆代码,为了项目模块化,最好是有专门的目录来统一存放这些过滤器,然后把处理函数给抽离出去,放在一个.js文件中,下边通过示例代码展示。
         6 
         7   示例一(局部过滤器):
         8 
         9   格式化时间或日期,补全指定位数,不足个位数补0
        10 // filter/index.js文件
        11 export default {
        12     dateFormat: value => {
        13         const dt = new Date(value * 1000)
        14     
        15         const y = dt.getFullYear()
        16         const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定位数,"要补全的符号或值")
        17         const d = (dt.getDay() + '').padStart(2, '0')
        18         
        19         const hh = (dt.getHours() + '').padStart(2, '0')
        20         const mm = (dt.getMinutes() + '').padStart(2, '0')
        21         const ss = (dt.getSeconds() + '').padStart(2, '0')
        22         
        23         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        24     }
        25 }
        26 ​
        27 // 在 .vue 文件中使用局部过滤器
        28 <script>
        29     import filters from '../filter'
        30 ​
        31     export default {
        32         ... ... 
        33         filters: { ...filters },
        34         data() {
        35             return {}
        36         }
        37     }
        38 </script>
        39 ​
        40 <div> 日期:{{ date | dateFormat }} </div>
          示例二(全局过滤器):
        
        通用字典项的回显:比如性别男女或通用选择是否,后端传给我们的数据是0、1,我们需要在页面上显示男女或是否
        // constants/dictionary.js 文件
        ​
        export const GENDER_MENU = [
            { code: 0, label: '男'},
            { code: 1, label: '女'}
        ];
        ​
        export const COMMON_MENU = [
            { code: 0, label: '否'},
            { code: 1, label: '是'}
        ];
        ​
        export default {
            GENDER_MENU, COMMON_MENU
        }
        
        // filter/dict.js 文件
        ​
        import Dict from '../constants/dictionary'
        ​
        export const genderMenu = {
            func: value => {
                const target = Dict.GENDER_MENU.filter(item => {
                    return item.code = value;
                })
                return target.length ? target[0].label : value;
            }
        }
        ​
        export const commonMenu = {
            func: value => {
                const target = Dict.COMMON_MENU.filter(item => {
                    return item.code = value;
                })
                return target.length ? target[0].label : value;
            }
        }
        
        // filter/index.js 文件
        ​
        import * as filters from './dict' // 导入过滤函数
        ​
        const Install = Vue => {
            // 导入的 filters 是一个对象,使用Object.keys()方法,得到一个由key组成的数组,遍历数据,让key作为全局过滤器的名字,后边的是key对应的处理函数,这样在任何一个组件中都可以使用全局过滤器了
            Object.keys(filters).forEach(key => {
                Vue.filter(key, filters[key].func)
            })
            /*
            for(const _filter in filters) {
                Vue.filter(`${_filter}`, filters[_filter].func)
            } */
        }
        ​
        export default Install
        
        // main.js 文件
        ​
        ... ...
        import filters from  './../filter/index'
        Vue.use(filters)
        ... ...
        
        
        // .vue 文件中使用全局过滤器
        ​
        <p>性别:{{ gender | genderMenu }}</p> 

         

这篇关于浅谈Vue中过滤器filter的使用{{ 变量名 | 过滤器名 }}的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!