你可以在 Vue 的 computed 属性中创建一个函数来实现这个需求。以下是一个基本示例：

<template>  
  <div>  
    {{ shortenedString }}  
  </div>  
</template>  
<script>  
import { computed } from 'vue';  
export default {  
  data() {  
    return {  
      originalString: 'This is a very long string that will be shortened.',  
      maxLength: 20,  
    };  
  },  
  computed: {  
    shortenedString() {  
      if (this.originalString.length > this.maxLength) {  
        return `${this.originalString.slice(0, this.maxLength)}...`;  
      } else {  
        return this.originalString;  
      }  
    }  
  }  
}  
</script>  

在这个示例中，我们定义了一个计算属性 shortenedString。如果 originalString 的长度超过了 maxLength，那么 shortenedString 将返回 originalString 的前 maxLength 个字符，后面加上 '...'。否则，它将直接返回 originalString。

请注意，具体的代码可能需要根据你自己的需求进行修改。这只是一个基础示例，实际的 Vue 应用可能更复杂。