Vue-过滤器

Vue-过滤器

• 过滤器

  过滤器（Filters）是vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。 过滤器应该被添加在JavaScript 表达式的尾部，由“管道符”进行调用。

  <p>message 的值是：{{ message | capi }}</p>
  
      // 过滤器函数，必须被定义到 filters 节点之下
      // 过滤器本质上是函数
      filters: {
          // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
          capi(val) {
          // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
          const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
          return first + other
      }
  }
  

• 私有过滤器

  filters: {
      // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
      capi(val) {
          // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
          const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
          return first + other
      }
  }
  

• 全局过滤器

  Vue.filters('capitalize',(str)=>{
  	return str+'111';
  })
  

  在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的el 区域内使用。 如果希望在多个 vue 实例之间共享过滤器。

• 连续调用多个过滤器

  <!-- 把message的值交给filterA进行处理 -->
  <!-- 把filterA处理的结果，再交给filterB进行处理 -->
  <!-- 最终把fliterB的处理结果，作为最终的值渲染到页面上 -->
  {{ message | filterA | filterB }}
  

  <p>{{ message | capitalize | maxLength }}</p>
  //全局过滤器--首字母大写
  Vue.filter('capitalize',(str)=>{
  	return str.charAt(0).toUpperCase() + str.slice(1) + '--';
  })
  //全局过滤器--控制文本的最大长度
  Vue.filter('maxLength',(str)=>{
  	if(str.length <= 10){
      	return str;                    
      }
      return str.slice(0,11) + '...';
  })
  

• 过滤器传参

  <p>{{ message | capitalize | maxLength(5) }}</p>
  //全局过滤器--首字母大写
  Vue.filter('capitalize',(str)=>{
  	return str.charAt(0).toUpperCase() + str.slice(1) + '--';
  })
  //全局过滤器--控制文本的最大长度
  Vue.filter('maxLength',(str, len = 10)=>{
  	if(str.length <= 10){
      	return str;                    
      }
      return str.slice(0,11) + '...';
  })