Vue的过滤器使用

需求：当标题或者详情过长的时候，对超过的字符进行省略处理
解决方法：使用vue的过滤器来进行过滤

   <div class="sinf">{{item.introduction | changeDetai}}
    <span class="smore" style="cursor: pointer" @click="detailFunction(item)">[详细]</span>
   </div>
<script>
    export default {
      
        data(){
            return {
              
            }
        },
         filters:{
    //将过长的字符串显示为省略号
    changeDetai(value){
      if (!value) return '';
      if (value.length > 150) {
        return value.slice(0,150) + '...'
      }
      return value
    },
  },
      
    }
</script>

<style scoped>

</style>

效果：