Vue JS文本插值表達式返回html或組件

Question

如何使用文本插值渲染模板內的組件？我嘗試了下面的代碼：

<template> 
    <div> {{ booleanValue ? "<my-component />" : "Some Text" }} </div> 
</template> 

但是，這是打印與「雙鬍子」的實際代碼，刪除組件標籤，也渲染組件。

{{ booleanValue ? "" : "Some Text" }} 

Answer 1

我仍然不知道如何用文字插值做到這一點，但我發現一個簡單的方法來這樣：Conditional Rendering

<div v-if="booleanValue"> 
    <my-component /> 
</div> 
<div v-else>Some Text</div>