在 Vue.js 中的雙花括號 {{ }} 內渲染元素

Question

我正在嘗試執行以下操作：

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

但是 Vue 不接受我在 {{ }} 中添加另一個元素<i> 。 我該如何解決這個問題？ \<i不工作...

Answer 1

您可以按如下方式使用v-if和v-else ：

 new Vue({ el: '#app', data(){ return{ limit_by:4 } } });

 <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <div id="app"> <p v-if="limit_by===4"> <i class="fas fa-plus"></i>Visa fler... </p> <p v-else> Visa färre </p> </div>

您可以查看文檔以獲取更多詳細信息。

Answer 2

嘗試使用帶有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>

Answer 3

需要注意的是，使用雙胡須將數據解釋為純文本，而不是 html。 我在這里解釋一下，但請查看此頁面上與 Vue 一起打包的v-html指令。

使用v-html指令意味着您仍然可以保持對三元語句的使用，如下所示：

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