VueJ가 계산한 속성이 HTML 코드를 반환하는 경우 어떻게 처리합니까?

VueJ가 계산한 속성이 HTML 코드를 반환하는 경우 어떻게 처리합니까?

사용하고 있다VueJS 2폼 항목을 렌더링하고 계산합니다.여기서 속성타이가 10 미만일 경우 숫자를 표시하고, 속성타이가 10을 초과하거나 같으면 문자 메시지를 표시해야 합니다.

다음 코드를 사용합니다.

Vue.component('mycomponent', {
    template: '#mytemp',
    data: function() {
        // ...
    },
    computed: {
         mycomputedprop: function() {
             if (this.model_a < 10) {
                 return '<span class="numbervalue">' + this.model_a + '€</span>';
             } else {
                 return '<span class="textvalue">I\'ll contact you as soon as possible!</span>';
             }
         }
    }
});

이 코드를 사용하여 값을 표시합니다.

<div id="app">
    {{ mycomputedprop }}
</div>

문제는 이 값을 표시하면 HTML 코드가 HTML이 아닌 텍스트로 표시됩니다. 반환된 값을 HTML 코드로 표시하려면 어떻게 해야 합니까?

사용할 수 있습니다.v-html

문서: Raw-HTML

<div id="app">
 <div v-html="mycomputedprop"></div>
</div>

이 div의 내용은 rawHtml 속성 값으로 대체됩니다.이것은 플레인 HTML로 해석됩니다.데이터 바인딩은 무시됩니다.Vue는 문자열 기반 템플릿 엔진이 아니므로 v-html을 사용하여 템플릿 일부를 구성할 수 없습니다.대신 UI 재사용 및 구성을 위한 기본 단위로 구성 요소가 선호됩니다.

Vue 3의 예:

const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">This should be red.</span>'
    }
  }
}

Vue.createApp(RenderHtmlApp).mount('#example1')

<script src="https://unpkg.com/vue@next"></script>
<div id="example1">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

modal_a가 컴포넌트 데이터에 정의되어 있다고 가정하면 컴포넌트 템플릿 내에서 이 문제를 처리해 보는 것은 어떨까요?

  <div id="app">
    <span v-if="model_a < 10" class="numbervalue">{{model_a}} €</span>
    <span v-else class="textvalue">I\'ll contact you as soon as possible!</span>
  </div>

언급URL : https://stackoverflow.com/questions/44804058/how-to-handle-when-vuejs-computed-properties-return-html-code