有条件的V-HTML渲染

Question

只是想知道我是否在这里缺少什么：

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

似乎没有用。

我想有这种span解析HTML，如果shouldParseHTMLBool设置为true 。

有可能吗，还是我应该使用v-if ？ 在这个琐碎的示例中，这没什么大不了的，但是对于我的组件，我将不得不为每个条件重复〜30行。

Answer 1

v-html指令替换了元素的innerHTML。 在您的情况下， {{ contentWithoutParsedHTML }}将被替换为(shouldParseHTMLBool ? HTMLContent : '')的值。

你可以做类似的事情

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

Answer 2

最好使条件尽可能远离模板。 您应该改为创建一个计算对象。

[模板]

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

[脚本]

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