Javascript 条件V-HTML呈现

我只是想知道我是否遗漏了什么：

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

{{contentWithoutParsedHTML}}

似乎不起作用

仅当

shouldParseHTMLBool

设置为

true

时，我才希望此

span

解释HTML

---

这是可能的，还是应该使用

v-if

？在这个简单的例子中，这不是什么大问题，但是对于我的组件，我必须为每个条件复制约30行。

指令

v-html

替换元素的innerHTML。在您的情况下，

{{contentwithoutparsedthml}}

将被

的值替换（shouldParseHTMLBool？HTMLContent:“”）

你可以这样做

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

方法：{
conditionalParse:函数（）{
返回this.shouldParseHTMLBool？this.HTMLContent:'
}

指令

v-html

替换元素的innerHTML。在您的情况下，

{contentWithoutParsedHTML}

将替换为

的值（shouldParseHTMLBool？HTMLContent:“”）

你可以这样做

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

方法：{
conditionalParse:函数（）{
返回this.shouldParseHTMLBool？this.HTMLContent:'
}

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

[模板]

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

---

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

[模板]

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

---

v-html

将用它的值替换元素中的任何内容。因此，

contentWithoutParsedHTML

将取代

HTMLContent

，或者三元

v-html

的else将用它的值替换元素中的任何内容，这将更有意义用于将

contentWithoutParsedHTML

替换为

HTMLContent

，或作为