Question

我使用var Final= JSON.parse(JSON.stringify(result)); var top10 = Final.sort(function (a, b) { return a.DocCount < b.DocCount ? 1 : -1; }) .slice(0, 10);来呈现和计算表单项。如果属性低于10，我需要显示一个数字，如果属性大于或等于10，我需要显示一条短信。

我使用此代码：

VueJS 2

我使用此代码显示值：

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

问题是：如果我显示此值，它会将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重用和基本单元组合物。

Answer 2

假设modal_a是在组件的数据中定义的，为什么不在组件模板中处理它？</ p>

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

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

2 个答案: