vue截取字符串

// 在 Vue.js 中截取字符串的示例代码

<template>
  <div>
    <!-- 使用 computed 属性来截取字符串 -->
    <p>原始字符串: {{ originalString }}</p>
    <p>截取后的字符串: {{ truncatedString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义原始字符串
      originalString: '这是一个非常长的字符串，需要进行截取处理。'
    };
  },
  computed: {
    // 使用 computed 属性来实现字符串截取
    truncatedString() {
      // 截取前10个字符，并在末尾添加省略号
      return this.originalString.length > 10 ? this.originalString.slice(0, 10) + '...' : this.originalString;
    }
  }
};
</script>

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

解释说明：

• data(): 在 data 函数中定义了一个 originalString，用于存储原始的字符串。
• computed: 使用 computed 属性来创建一个计算属性 truncatedString，它会根据 originalString 的长度自动截取字符串。如果字符串长度超过10个字符，则只显示前10个字符并在末尾添加省略号 (...)；否则直接返回原始字符串。
• slice(): slice(0, 10) 方法用于从索引0开始截取到索引10（不包括索引10）的子字符串。

这样可以在模板中直接使用 {{ truncatedString }} 来显示截取后的字符串。