在 vuejs 3 中截断单词（字符）

【问题标题】：Truncate words (chars) in vuejs 3在 vuejs 3 中截断单词（字符）
【发布时间】：2021-12-31 12:17:03
【问题描述】：

如何在 VueJs 3 中截断单词或字符？我搜索了一些答案，但没有为我工作。例如，如果描述词长度超过 200 ，则应显示 200 个词，并在末尾显示 ...

到目前为止我尝试了什么..

<p>{{ announcement.description | truncate(200) }}</p>

<script>
export default {
data() {
    return {
      announcement: {},
    }
  },
computed:{
    truncate(value, length) {
        if (value.length > length) {
            return value.substring(0, length) + "...";
        } else {
            return value;
          }
    }
  }
}
</script>

【问题讨论】：

预期的结果应该是什么？请自行添加问题...
对不起，我编辑了

标签： javascript vue.js vuejs3

【解决方案1】：

您正在寻找的是一种方法，而不是计算属性。 A computed property is used to declaratively describe a value that depends on other values。将您的代码移动到方法中，并使用它应该工作的长度传递参数。

    methods: {
       truncate(value, length) {
        if (value.length > length) {
            return value.substring(0, length) + "...";
        } else {
            return value;
          }
      }
   }

只需从模板中调用此方法：

truncate(announcement.description,200)

您可以从此处阅读有关计算的正确用法的信息： https://vuejs.org/v2/guide/computed.html

【讨论】：