截断vuejs中已处理的html

Question

我使用v来剥离html标记，但仍然显示已处理的html。问题是，我只想展示200个字符。我可以构建截取脚本，但是v似乎不采用过滤器。我怎样才能做到这一点？

例如：

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

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

我试着构建一个条形标签过滤器并截断+去掉普通<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

您能从docs https://v2.vuejs.org/v2/guide/filters.html尝试另一种(本地)方式吗？

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

Upd。此外，在使用v和过滤器时也存在缺陷：

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

• "Vue

1. 不适用于v-html“https://github.com/vuejs/vue/issues/6056

”。

解决方案

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

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

不再需要striphtml过滤器。