vue实现信息删减
Vue 实现信息删减的方法
使用过滤器（Filters）
在 Vue 2 中，可以通过过滤器对文本进行删减或格式化。例如，实现一个截断文本的过滤器：
Vue.filter('truncate', function (text, length, suffix) {
return text.length > length ? text.substring(0, length) + (suffix || '...') : text;
});在模板中使用：
<p>{{ longText | truncate(100, '...') }}</p>使用计算属性（Computed Properties）
计算属性可以根据条件动态返回删减后的内容：
computed: {
shortenedText() {
const maxLength = 50;
return this.longText.length > maxLength
? this.longText.substring(0, maxLength) + '...'
: this.longText;
}
}模板中直接绑定：
<p>{{ shortenedText }}</p>使用自定义指令（Directives）
通过自定义指令实现动态删减，适合需要交互控制的场景：
Vue.directive('truncate', {
bind(el, binding) {
const maxLength = binding.value || 100;
const originalText = el.textContent;
if (originalText.length > maxLength) {
el.textContent = originalText.substring(0, maxLength) + '...';
el.setAttribute('title', originalText); // 鼠标悬停显示全文
}
}
});使用方式：
<p v-truncate="50">{{ longText }}</p>使用第三方库
如果需要更复杂的功能（如按单词截断、多语言支持），可以使用如 vue-truncate-filter 或 lodash 的 _.truncate：
import _ from 'lodash';
export default {
computed: {
truncatedText() {
return _.truncate(this.longText, { length: 30 });
}
}
}响应式删减（结合点击展开）
通过数据驱动实现点击展开/收缩功能：
data() {
return {
isExpanded: false,
longText: '...'
};
},
computed: {
displayText() {
return this.isExpanded
? this.longText
: this.longText.substring(0, 100) + '...';
}
}模板部分：
<p>{{ displayText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>注意事项
- 性能优化：避免在长列表中使用复杂的删减逻辑，优先使用计算属性缓存结果。
- 可访问性：通过
title属性或aria-label提供完整信息。 - 国际化：考虑不同语言的字符长度差异，避免硬编码截断长度。
