我使用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>
解决方法
你可以使用v-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.
