当VueJS计算属性返回HTML代码时如何处理？

Question

我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代码？

Answer 1

你可以用 v-html

文档:原始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>