vue.js 条件V-HTML呈现

vdzxcuhz 于 2022-11-17 发布在 Vue.js

关注(0)|答案(3)|浏览(169)

只是想知道我是不是错过了什么：

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

似乎不起作用。
我希望只有当shouldParseHTMLBool设置为true时，span才能解释HTML。
这是可能的吗？或者我应该使用v-if吗？在这个小例子中，这不是什么大问题，但是对于我的组件，我必须为每个条件复制大约30行。

vue.js

来源：https://stackoverflow.com/questions/54637891/conditional-v-html-rendering

3条答案

按热度按时间

4uqofj5v1#

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

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

[脚本]

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

赞(0）回复(0）举报 2022-11-17

mwecs4sa2#

v-html指令替换元素的innerHTML。在您的示例中，{{ contentWithoutParsedHTML }}将替换为(shouldParseHTMLBool ? HTMLContent : '')的值
你可以这样做

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

赞(0）回复(0）举报 2022-11-17

5hcedyr03#

试试这个

<span v-if="shouldParseHTMLBool" v-html="HTMLContentForIfCondition" >All</span>
<span v-else v-html="HTMLContentForElseCondition" ></span>

可以使用两个跨度，一个用于v-if is true，另一个用于v-else

赞(0）回复(0）举报 2022-11-17

我来回答

vue.js 条件V-HTML呈现

3条答案

相关问题

热门标签

最新问答