Schnurrbart mit Bedingungsanzeige HTML-Attribute?

Question

Ist es möglich, HTML-Attribute im Vue-Schnurrbart anzuzeigen?

{{ (data.status)? "<div>Active</div>" : "<div>InActive</div>"}}

Answer 1

Sie können einem Schnurrbartausdruck kein HTML hinzufügen. Der Ausdruck wird nicht ausgewertet.

https://jsfiddle.net/0zaknb56/

Was Sie tun können, ist die v-htmlRichtlinie zu verwenden

<div v-html="data.status ? `<div>Active</div>` : `<div>Inactive</div>`">
</div>

https://jsfiddle.net/7h6osyt9/

Answer 2

Sie können die v-ifDirektive in Ihrem Fall verwenden.

<div v-if="data.status">Active</div>
<div v-else>Inctive</div>