当前位置：首页 > 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中实现手写签名功能，通常需要借助HTML5的Canvas API来捕获用户的绘制操作。核心流程包括初始化画布、监听触摸/鼠标事件、记录轨迹以及生成签名图片。…

vue树形实现

Vue 树形组件实现方法使用递归组件实现树形结构递归组件是 Vue 中实现树形结构的常见方法。通过组件调用自身的方式，可以轻松构建多层嵌套的树形结构。 <template> &l…

实现vue table

Vue 表格实现方法基础表格实现使用 Vue 的 v-for 指令可以快速渲染表格数据。在模板中定义表格结构，通过数据绑定动态生成行和列。 <template> <tabl…

react实现vue

React 实现 Vue 功能 React 和 Vue 是两种不同的前端框架，但可以通过一些方法在 React 中实现 Vue 的特性。以下是几种常见 Vue 功能在 React 中的实现方式：双…

vue实现首页

Vue 实现首页的基本步骤安装 Vue.js 和相关依赖，可以通过 Vue CLI 或 Vite 快速初始化项目。Vue CLI 适合传统项目，Vite 更适合现代前端开发。 npm instal…

vue实现抽奖轮盘

实现抽奖轮盘的基本思路使用Vue实现抽奖轮盘的核心在于动态旋转动画和结果判定。通常需要结合CSS动画或JavaScript动画库（如GSAP）控制轮盘的旋转角度，并通过随机数或后端接口确定最终奖项。…

vue实现信息删减