当前位置：首页 > VUE

vue实现信息删减

2026-02-17 01:29:12VUE

Vue 实现信息删减的方法

使用计算属性动态截取文本

通过计算属性结合字符串的 slice 或 substring 方法实现文本截取，适合需要响应式更新的场景：

computed: {
  truncatedText() {
    return this.fullText.length > 50 
      ? this.fullText.substring(0, 50) + '...'
      : this.fullText;
  }
}

模板中直接使用：

<p>{{ truncatedText }}</p>

自定义过滤器/管道

Vue 2.x 可使用过滤器，Vue 3.x 可使用全局属性或组合式函数：

Vue 2 示例：

vue实现信息删减

filters: {
  truncate(value, length) {
    return value.length > length 
      ? value.slice(0, length) + '...'
      : value;
  }
}

使用方式：

<p>{{ fullText | truncate(30) }}</p>

使用 CSS 文本溢出控制

纯视觉层面的截断，不影响原始数据：

vue实现信息删减

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

组件化封装

创建可复用的截断组件，支持动态配置：

<template>
  <span :title="showFull ? '' : text">
    {{ showFull ? text : truncatedText }}
    <button @click="toggle"> {{ showFull ? '收起' : '展开' }} </button>
  </span>
</template>

<script>
export default {
  props: ['text', 'maxLength'],
  data() {
    return { showFull: false }
  },
  computed: {
    truncatedText() {
      return this.text.slice(0, this.maxLength) + '...';
    }
  },
  methods: {
    toggle() {
      this.showFull = !this.showFull;
    }
  }
}
</script>

第三方库

使用专门处理文本截断的库如 vue-text-truncate：

import TextTruncate from 'vue-text-truncate';
components: { TextTruncate }

模板使用：

<text-truncate 
  :text="longText" 
  :max-chars="100" 
  ellipsis="..." 
/>

注意事项

性能敏感场景避免在计算属性中进行复杂计算
需要精确字符计算时注意中英文字符差异
移动端显示需考虑不同屏幕尺寸的动态截断长度
可访问性需求应保留完整文本的 title 或 aria-label 属性

标签: 信息 vue

分享给朋友：

vue 实现复选

Vue 实现复选功能在 Vue 中实现复选功能可以通过多种方式完成，以下是常见的几种方法：使用 v-model 绑定数组通过 v-model 绑定一个数组，可以自动收集用户选择的复选框值。…

vue实现过程

Vue 的实现过程 Vue 的实现过程可以分为多个核心模块，包括响应式系统、虚拟 DOM、模板编译等。以下是 Vue 的主要实现过程分析。响应式系统 Vue 的响应式系统基于 Object.def…

vue tab实现

Vue Tab 实现方法使用动态组件实现 Tab 在 Vue 中可以通过动态组件 <component :is="currentTab"> 结合 v-for 和 v-bind 实现 Ta…

vue实现长按

Vue 实现长按功能的方法在 Vue 中实现长按功能可以通过原生事件监听或自定义指令完成。以下是几种常见实现方式：使用原生事件监听通过 @mousedown 和 @mouseup 或 @tou…

实现vue datepicker

安装依赖使用 vue-datepicker 或第三方库如 v-calendar 或 vue2-datepicker。以 vue2-datepicker 为例： npm install vue2…

vue实现123456

Vue 实现数字 123456 的显示在 Vue 中显示数字 123456 非常简单，可以通过以下方法实现：方法一：直接在模板中显示 <template> <div>…

vue实现信息删减