Условный рендеринг V-HTML

Question

Просто интересно, есть ли здесь что-то, чего мне не хватает:

<span v-html="(shouldParseHTMLBool ? HTMLContent : '')">
  {{ contentWithoutParsedHTML }}
</span>

, похоже, не работает.

Я бы хотел, чтобы эта span интерпретировала HTML, только еслиshouldParseHTMLBool установлено на true.

Возможно ли это, или я должен использовать v-if?В этом тривиальном примере это не имеет большого значения, но с моими компонентами мне придется дублировать ~ 30 строк для каждого условия.

Answer 1

Лучше сделать как можно больше условий от шаблона.Вместо этого вы должны создать вычисляемый объект.

[шаблон]

<span v-html="computedContent"></span>

[скрипт]

...
computed: {
  computedContent: function () {
    return this.shouldParseHTMLBool ? this.HTMLContent : ''
  }
},
...

Answer 2

Директива v-html заменяет innerHTML элемента.В вашем случае {{ contentWithoutParsedHTML }} будет заменено значением (shouldParseHTMLBool ? HTMLContent : '')

. Вы можете сделать что-то вроде

<template>
<span v-html="conditionalParse"></span>
</template>
<script>
methods: {
conditionalParse: function () {
    return this.shouldParseHTMLBool ? this.HTMLContent : ''
}
</script>