在vuejs中截断处理过的html

Question

我正在使用 v-html 去除 html 标签，但仍显示处理后的 html。问题是，我只想显示 200 个字符。我可以构建截断脚本，但 v-html 似乎没有过滤器。我怎样才能做到这一点？

例如：

// This
<div class="excerpt" v-html="body_html"></div>

// Into this
<div class="excerpt" v-html="body_html | truncate(200)"></div>

我尝试构建一个 striptag 过滤器并截断 + 去除常规标签，<p>但它没有处理 html。换句话说，我得到了原始 HTML，没有任何粗体、斜体等

例如，像这样:(不是我喜欢的方法，除非你能找到一种方法让我改进它，这样我仍然可以得到呈现的 HTML。

    <div>{{strippedContent | truncate(200)}}</div>

    Vue.filter("truncate", function(value, length) {
        if (!value) return "";
        value = value.toString();
        if (value.length > length) {
            return value.substring(0, length) + "...";
        } else {
            return value;
        }
    });

    export default {
        data() {
            return {
                body_html: this.post.body_html
            };
        },
        computed: {
            strippedContent() {
                let regex = /(<([^>]+)>)/gi;
                return this.body_html.replace(regex, "");
            }
        }
    };

Answer 1

您可以从文档https://vuejs.org/v2/guide/filters.html尝试另一种（本地）方式吗？

在创建 Vue 实例之前，应该对过滤器进行全局（您的方式）注册。你能检查一下吗？

更新。v-html 和过滤器一起工作也有错误：

1. “v-html 不适用于过滤器” https://github.com/vuejs/vue/issues/4352
2. “Vue 过滤器不适用于 v-html” https://github.com/vuejs/vue/issues/6056

解决方案

在模板中，将 v-html 行替换为

<div :inner-html.prop="body_html | truncate(250)"></div>

不再需要 striphtml 过滤器