vue 根据字符串的长度控制显示的字数超出显示省略号

经常会见到,标题或者字段超过多长,然后进行相关的截断,以下在vue当中,使用了vue的过滤器,很好的解决了这问题。

<template>
    <div class="title">{{ name | ellipsis}}</div>
</template>

<script>
    export default {
        name: "demo",
        data(){
            return {
                name:'这是一个标题',
            }
        },
        filters:{
            ellipsis(value){
                if (!value) return '';
                if (value.length > 10) {
                    return value.slice(0,10) + '...'
                }
                return value
            }
        }
    }
</script>

<style scoped>

</style>
参考资料

Vue过滤器

    原文作者:喝醉的清茶
    原文地址: https://segmentfault.com/a/1190000019602889
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞