同样的事情在类似的方式下可以是：
在main.js文件中：

var filter = function(text, length, clamp){
    clamp = clamp || '...';
    var node = document.createElement('div');
    node.innerHTML = text;
    var content = node.textContent;
    return content.length > length ? content.slice(0, length) + clamp : content;
};

Vue.filter('truncate', filter);

在您模板中：

{{data.content | truncate(300, '...')}}

您可以使用filter将其截断。

//credit to @Bill Criswell for this filter
Vue.filter('truncate', function (text, stop, clamp) {
    return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
})

然后为过滤器指定所需的字符串长度

<my-component>
    {{'Lorem ipsum dolor sit amet, consectetur adipisicing' | truncate(50) }}
</my-component>

在子组件中，slot中的内容是按原样传递的，不能作为可以从子端截断的变量使用。

@community答案的一个小修正：
组件内：

export default {
    data: () => {
        return {}
    },
    created() {
    },
    filters: {
        truncate: function (text, length, suffix) {
            if (text.length > length) {
                return text.substring(0, length) + suffix;
            } else {
                return text;
            }
        },
    }
}

或全球：

/** Vue Filters Start */
Vue.filter('truncate', function (text, length, suffix) {
    if (text.length > length) {
        return text.substring(0, length) + suffix;
    } else {
        return text;
    }
});
/** Vue Filters End */

它仍然可以用同样的方式使用：

<div id="app">
  <span>{{ text | truncate(10, '...') }}</span>
</div>

你也可以这样做：

export default {
    data: () => {
      return { 
      }
    },
    created(){
    },
    filters: {
        truncate: function (text, length, suffix) {
            if (text.length > length) {
                return text.substring(0, length) + suffix;
            } else {
                return text;
            }
        },
    }
}

或

Vue.filter('truncate', function (text, length, suffix) {
    if (text.length > length) {
        return text.substring(0, length) + suffix;
    } else {
        return text;
    }
});

然后像这样使用它：

<div id="app">
  <span>{{ text | truncate(10, '...') }}</span>
</div>

如果你想知道更多的vue过滤器，我建议你读这个：How to Create Filters in Vue.js with Examples

您可以只使用slice js方法来指示字符串的begin和end位置。More info

<my-component>{{ lorem.slice(0, 180) }}...</my-component>

<script>
export default {
  data() {
    return {
      lorem:
        "Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos."
    };
  }
};
</script>

对于nuxt应用程序，这对我很有效：

<div v-html="$options.filters.truncate(post.body)"></div>

这是我的过滤器

filters: {
    truncate: function (text, length) {
      if (text.length > 30) {
        return text.substring(0, 30) + '...'
      } else {
        return text
      }
    },
  },