• Vue-自定义过滤器


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

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

    可以在一个组件的选项中定义局部的过滤器

    filters: {
        //过滤器的名字可以自定义
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
       //通过return 返回要过滤后的结果
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }

    或者在创建 Vue 实例之前全局定义过滤器:

    //capitalize为过滤器的自定义名字
    Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    
    new Vue({
      // ...
    })

    过滤器可以串联:

    {{ message | filterA | filterB }}

    这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数

    {{ message | filterA('arg1', arg2) }}  // message 的值作为第一个参数,'arg1' 作为第二个参数,arg2 的值作为第三个参数
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    整数子数组求最大和
    四则运算实现
    四则运算
    2015年大二下学期读书计划
    java变量和数据类型
    jdk的安装和java的入门概念
    数据库的设计
    多表查询
    数据约束和外键
    表数据的简单查询语句
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13932589.html
Copyright © 2020-2023  润新知