vue中用过滤器filter

当name名超过15个字符的时候，只显示15个字符，超出部分用省略号显示
第一种方法三目运算符判断

<span class="userName">
{{userInfoDataAccount.name&&userInfoDataAccount.name.length>15?userInfoDataAccount.name.substr(0,15)+'...': userInfoDataAccount.name}}
</span>

第二种方法用filter过滤器（此方法是局部过滤器）

<span class="userName">{{userInfoDataAccount.name | handleText}}</span>
filters: {
    handleText(value){
      if(value){
        if(value.length>15){
          return value.slice(0,15)+'...'
        }
        return value
      }else{
        return ''
      }
    },
},

全局过滤器
在main.js中定义过滤器，在每个页面中可以直接使用

Vue.filter('handleText', function(value) {
  if(value){
    if(value.length>15){
      return value.slice(0,15)+'...'
    }
    return value
  }else{
    return ''
  }
}),

在index.vue中使用

<span class="userName">{{userInfoDataAccount.name | handleText}}</span>

当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤优先于全局过滤器被调用
一个表达式可以使用多个过滤器，过滤器之间需要用管道符“|”隔开。其执行顺序从左往右