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過濾器