vue 截取字符串

// 截取字符串的示例代码

<template>
  <div>
    <p>原始字符串: {{ originalString }}</p>
    <p>截取后的字符串: {{ truncatedString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalString: "这是一个用于演示Vue截取字符串功能的句子。",
      maxLength: 10 // 设置最大长度
    };
  },
  computed: {
    truncatedString() {
      // 使用 substring 方法截取字符串
      if (this.originalString.length > this.maxLength) {
        return this.originalString.substring(0, this.maxLength) + "...";
      }
      return this.originalString;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. 模板部分 (<template>)：展示了原始字符串和截取后的字符串。
2. 脚本部分 (<script>)：
   • data 中定义了原始字符串 originalString 和最大长度 maxLength。
   • computed 中定义了一个计算属性 truncatedString，它会根据 originalString 的长度来决定是否需要截取，并在超过指定长度时添加省略号 (...)。
3. 样式部分 (<style scoped>)：可以自行添加样式以美化页面。

这段代码展示了如何在 Vue.js 中使用 substring 方法来截取字符串，并在超出指定长度时自动添加省略号。