How to handle when VueJS computed properties return HTML?

Question

I use VueJS 2to render and calculate form elements. Now I need to show a number if the correct value is less than 10, and I need to show a text message if the property is too large or equal to 10.

I am using this code:

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>';
             }
         }
    }
});

I use this code to display the value:

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

The problem is this: if I show this value, it will display the HTML code as text, and not as HTML. How to show return value as HTML code?

Answer 1

you can use v-html

Document: Raw-HTML

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

div rawHtml, HTML-, . : v-html , Vue . , UI .

Answer 2

, 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>