javascript - 在 vuejs 中 chop 已处理的 html

Question

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

例如:

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

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

我尝试构建一个striptag过滤器并 chop +剥离常规 <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://v2.vuejs.org/v2/guide/filters.html 中尝试另一种(本地)方式吗？ ?
应该在创建 Vue 实例之前进行过滤器的全局(您的方式)注册。你能检查一下吗？
更新。
一起使用 v-html 和过滤器也有错误:

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

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

解决方案
在模板中，将 v-html 行替换为

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

不再需要 striphtml 过滤器