javascript 在vuejs中截断处理过的html

rslzwgfq  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(127)

我使用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。

<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, "");
            }
        }
    };
k4emjkb1

k4emjkb11#

你能从文档https://v2.vuejs.org/v2/guide/filters.html尝试另一种(本地)方法吗?
在创建Vue示例之前,应该进行过滤器的全局(您的方式)注册。您能检查一下吗?
Upd.在v-html和过滤器一起工作时也有错误:
1.“v-html不适用于过滤器”https://github.com/vuejs/vue/issues/4352
1.“Vue filter dont work on v-html”https://github.com/vuejs/vue/issues/6056
溶液
在模板中,将v-html行替换为

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

不再需要striphtml过滤器

相关问题