当前位置：首页 > VUE

vue实现信息删减

2026-03-08 13:29:55VUE

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;
  }
}

模板中直接绑定：

vue实现信息删减

<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); // 鼠标悬停显示全文
    }
  }
});

使用方式：

vue实现信息删减

<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 提供完整信息。
国际化：考虑不同语言的字符长度差异，避免硬编码截断长度。

标签: 信息 vue

分享给朋友：

vue实现alert

实现自定义 Alert 组件在 Vue 中可以通过组件化方式实现自定义 Alert 弹窗。以下是基于 Vue 3 的实现示例：组件代码 (Alert.vue) <template>…

vue 实现拖拽

Vue 实现拖拽功能使用 HTML5 原生拖拽 API HTML5 提供了原生的拖拽 API，可以通过 draggable 属性和相关事件实现拖拽功能。 <template> &l…

vue 实现直播

Vue 实现直播的基本方法在Vue中实现直播功能，通常需要结合WebRTC、RTMP或HLS等技术。以下是几种常见的实现方式：使用WebRTC实现实时直播 WebRTC适合低延迟的实时直播场景，…

vue实现hover

Vue 实现 hover 效果的方法在 Vue 中实现 hover 效果可以通过多种方式实现，包括使用 CSS、Vue 指令或事件监听。以下是几种常见的方法：使用 CSS :hover 伪类通…

vue实现suspense

Vue 3 中实现 Suspense Suspense 是 Vue 3 引入的一个内置组件，用于处理异步依赖的加载状态。它允许在等待异步组件或异步数据加载时显示一个后备内容（fallback），直到异…

vue实现toast

Vue 实现 Toast 的方法使用第三方库（推荐）对于快速实现 Toast 功能，推荐使用成熟的第三方库如 vue-toastification 或 vant 的 Toast 组件。安装 v…

vue实现信息删减