vue1-过滤器(控制字体溢出样式-超过限定字数即显示“...”)

Vue.filter   过滤器的用法

注册

全局过滤器：

Vue.filter('ellipsis', (value) => {

return value + ".."

}

组件过滤器（局部）：

filters:{

componentFilter:function(value){

return value + "..."

}

}

使用

一，在双花括号插值 

 {{ 'ok' | ellipsis}}

二，在v-bind表达式中使用 

<div   v-bind:data="'ok| ellipsis"></div>

全局注册时是filter,没有s的,而组件过滤器是filters,是有s的

 

案例

// 过滤器

import Vue from 'vue'

// 控制字体溢出样式-超过限定字数即显示“...”

Vue.filter('ellipsis', (value) => {

  const cNumber = '4'// 设置限定字数

  if (!value) return ''

  if (value.length > cNumber) {

    return value.slice(0, cNumber) + '...'

  }

  return value

})