vue 字符串截取

// 使用 Vue.js 截取字符串的示例代码

<template>
  <div>
    <p>{{ truncatedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: "这是一个非常长的字符串，需要进行截取以适应特定的显示需求。"
    };
  },
  computed: {
    // 使用 computed 属性来截取字符串
    truncatedText() {
      const maxLength = 10; // 设置最大长度
      if (this.originalText.length > maxLength) {
        return this.originalText.slice(0, maxLength) + "..."; // 截取并添加省略号
      }
      return this.originalText;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. data(): 定义了一个 originalText 变量，用于存储原始字符串。
2. computed: 使用计算属性 truncatedText 来处理字符串截取逻辑。
   • maxLength 设置了字符串的最大长度。
   • 如果原始字符串长度超过 maxLength，则使用 slice() 方法截取前 maxLength 个字符，并在末尾添加省略号 "..."。
   • 如果字符串长度不超过 maxLength，则直接返回原始字符串。
3. 模板部分 (<template>): 在模板中通过插值表达式 {{ truncatedText }} 显示截取后的字符串。

这样可以确保在前端页面上显示的字符串不会过长，同时保持良好的用户体验。