vue根据字符串的长度控制显⽰的字数超出显⽰省略号⼀、概述
经常会见到，标题或者字段超过多长，然后进⾏相关的截断，以下在vue当中，使⽤了vue的过滤器，很好的解决了这问题。
⼆、代码实现
test.vue
<template>
<div class="title">{{ name | ellipsis}}</div>
</template>
<script>
export default {
name: "test",
data(){
return {
name:'我的家在东北松花江上du, 那⾥有森林煤zhi矿, 还有那满⼭遍dao野的⼤⾖⾼梁. ',
}
},
filters:{判断字符串长度
ellipsis(value){
if (!value) return '';
if (value.length > 10) {
return value.slice(0,10) + '...'
}
return value
}
}
}
</script>
<style scoped>
</style>
View Code
ellipsis⽅法表⽰，当字符串长度超过10，显⽰省略号。
打开⽹页，显⽰：
我的家在东北松花江上...
注意，对于v-html，过滤规则写在filters是不⽣效的，需要写在methods⾥⾯才⾏。
使⽤时，⽰例如下：
v-html="ellipsis(value)"
本⽂参考链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。