Vue.js中的过滤器——filter使用小结

最近项目中因前台页面展示时某个字段过长导致页面样式变形，所以需要对过长的字段进行省略展示，比如字数超过25则只显示前25个字，后面的则用'...'代替。

根据网上查找方法，选用了Vue.js的过滤器——filter。

它可以某个组件中定义：

filters:{
    ellipsis:function(value){
        if (value.length > 25){
            return value.slice(0, 25) + "..."
        }else{
            return value
        }
    }
  }

也可以进行全局定义（这里需要注意的，全局过滤器的写法是filter，没有s，而组件中过滤器的写法是filters，是有s的）：

Vue.filter('ellipsis', function (value) {
  if (value.length > 25){
      return value.slice(0, 25) + "..."
  }else{
      return value
  }
})

new Vue({
  // ...
})

定义过滤器后，可以用如下方法使用：

<!-- 在双花括号中 -->
<td>{{value.project_address | ellipsis}}</td>

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

效果展示：