在Vue.js中呈现双花括号{{ }}内的元素

wnrlj8wa 于 2022-12-14 发布在 Vue.js

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

我正在尝试做以下事情：

{{ limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre' }}

但是Vue不接受我在{{ }}内添加另一个元素<i>。我如何解决这个问题？\<i不起作用...

3条答案

您可以使用v-if和v-else，如下所示：
第一个
您可以查看docs以了解更多详细信息。

尝试使用v-if和v-else指令的条件渲染：

<template v-if="limit_by===4">
   <i class="fas fa-plus"></i>Visa fler...
</template>
<template v-else>
   Visa färre
</template>

需要注意的是，双须的使用将数据解释为纯文本，而不是html。我在这里解释一下，但是请查看本页上与Vue一起打包的v-html指令。
使用v-html指令意味着您仍然可以按如下方式使用三元语句：

<div v-html="limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre'"></div>