当前位置：首页 > 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 示例：

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

使用方式：

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

使用 CSS 文本溢出控制

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

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

模板使用：

vue实现信息删减

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

注意事项

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

标签: 信息 vue

分享给朋友：

vue路由实现内部切换

Vue 路由实现内部切换的方法 Vue Router 是 Vue.js 官方的路由管理器，用于实现单页应用（SPA）的页面切换。以下是几种常见的内部路由切换方式：使用 <router-lin…

vue实现toggle

Vue 实现 Toggle 功能在 Vue 中实现 toggle（切换）功能可以通过多种方式完成，以下是几种常见的方法：使用 v-model 和 v-on 通过 v-model 绑定数据，结合…

vue 实现折叠

Vue 实现折叠功能的方法在 Vue 中实现折叠功能可以通过多种方式完成，以下是几种常见的实现方法：使用 v-if 或 v-show 控制显示隐藏通过绑定一个布尔值变量，结合 v-if 或 v…

vue 实现聊天

使用 Vue 实现聊天功能创建 Vue 项目并安装依赖确保已安装 Vue CLI，通过以下命令创建新项目： vue create chat-app 进入项目目录后，安装必要的依赖（如 Socke…

vue实现hexo

Vue 集成 Hexo 的实现方法 Hexo 是一个静态博客框架，而 Vue 是一个前端框架。将 Vue 集成到 Hexo 中可以通过以下方式实现：在 Hexo 中使用 Vue 组件通过 Hex…

vue实现项目

Vue 项目实现指南环境准备确保已安装 Node.js（建议版本 14+）和 npm/yarn。通过以下命令检查版本： node -v npm -v 创建 Vue 项目使用 Vue CLI 快…

vue实现信息删减