当前位置：首页 > 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 实现在线预览

Vue 实现在线预览的常见方法使用 iframe 嵌入通过 iframe 标签可以嵌入多种类型的文件，如 PDF、图片、网页等。需要确保文件地址可访问。 <template>…

vue 实现toast

vue 实现 toast 的方法在 Vue 中实现 Toast 提示功能可以通过多种方式，以下是几种常见的实现方法：使用第三方库 Vue 生态中有许多成熟的 Toast 库，例如 vue-toa…

vue实现选区

Vue 实现选区的基本方法在Vue中实现选区功能通常涉及DOM操作和事件处理。以下是几种常见的方法：使用原生JavaScript的Selection API 通过window.getSelec…

vue实现盖章

Vue 实现盖章功能在Vue中实现盖章功能通常涉及前端UI交互，通过Canvas或SVG绘制印章，并允许用户拖拽或点击放置印章。以下是具体实现方法：使用Canvas绘制印章通过HTML5的Ca…

vue怎么实现

Vue 实现方法 Vue 是一个流行的前端框架，用于构建用户界面。以下是几种常见的实现方法：数据绑定使用 v-model 指令实现双向数据绑定，适用于表单输入元素。 <input v…

vue实现信息删减