vuej에서 처리된 html 잘라내기

vuej에서 처리된 html 잘라내기

나는 html 태그를 벗겨내기 위해 v-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>

스트립태그 필터를 만들어서 일반태그를 잘라내서<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, "");
            }
        }
    };

docs https://vuejs.org/v2/guide/filters.html에서 다른 (현지) 방법을 시도해보시겠습니까?

Vue 인스턴스를 생성하기 전에 필터의 글로벌(사용자 방식) 등록을 수행해야 한다.확인해 줄 수 있니?

업데이트. 또한 v-html과 필터를 함께 사용할 때 버그가 발생함:

1. "v-properties가 필터와 함께 작동하지 않음" https://github.com/vuejs/vue/issues/4352
2. "v-properties에서 Vue 필터가 작동하지 않음" https://github.com/vuejs/vue/issues/6056

해결책

템플릿에서 v-html 라인을 다음으로 교체하십시오.

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

스트라이프ml 필터가 더 이상 필요하지 않음

참조URL: https://stackoverflow.com/questions/59806739/truncating-processed-html-in-vuejs