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

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

解决方法

你可以使用v-html

文件：Raw-HTML

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

The contents of this div will be replaced with the value of the rawHtml property,interpreted as plain HTML – data bindings are ignored. Note that you cannot use v-html to compose template partials,because Vue is not a string-based templating engine. Instead,components are preferred as the fundamental unit for UI reuse and composition.