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

我使用

vuejs2

渲染和计算表单项。现在，如果某个属性小于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>';
             }
         }
    }
});

Vue.component（'mycomponent'{
模板：“#mytemp”，
数据：函数（）{
// ...
},
计算：{
mycomputerdprop:function（）{
如果（该型号a<10）{
返回“+this.model_a+”€”；
}否则{
return“我会尽快与您联系！”；
}
}
}
});

我使用此代码显示值：

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

{{mycomputerdprop}}

---

问题是：如果我显示这个值，它会将HTML代码显示为文本，而不是HTML。如何将返回值显示为HTML代码？

您可以使用

v-HTML

文件：

此div的内容将替换为 rawHtml属性，解释为普通HTML-数据绑定 忽略。请注意，不能使用v-html编写模板部分， 因为Vue不是基于字符串的模板引擎。相反 组件是首选的UI重用和重用的基本单元 组成

---

假设模态_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>

{{model_a}}}€
我会尽快与你联系！

对于所问问题，它可能是最佳答案。所以我投了更高的票。但是一个好的做法是不返回HTML。关于这一点，@JeBokE的回答是“更好”。这是一种方法，但远不是最佳的。Vue不鼓励将模板直接处理到HTML中。

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