Question

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

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

似乎不起作用。

仅当span设置为shouldParseHTMLBool时，我才想让true来解释HTML。

是否有可能，还是应该使用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 : ''
  }
},
...

有条件的V-HTML渲染

2 个答案: