当 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

文档：Raw-HTML

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

这个 div 的内容将被替换为 rawHtml 属性，解释为纯 HTML - 数据绑定是 忽略。请注意，您不能使用 v-html 来编写模板部分， 因为 Vue 不是基于字符串的模板引擎。反而， 组件被首选作为 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>

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>