抑制v-html包裝標籤

請考慮以下代碼。我想切換一個摘錄和說明。下面的代碼直接做到了這一點，但它意味着在文章外部有<a>，我更喜歡它。抑制v-html包裝標籤

<article v-if="!toggle" v-html="item.excerpt"></article> 
<a href="#" v-if="!toggle" @click.prevent="toggle = 1">Read more...</a> 

<article v-if="toggle" v-html="item.description"></article> 
<a href="#" v-if="toggle" @click.prevent="toggle = 0">Show less...</a>

它可以被改寫爲

<article v-if="!toggle"> 
    <span v-html="item.excerpt"></span> 
    <a href="#" @click.prevent="toggle = 1">Read more...</a> 
</article> 

<article v-if="toggle"> 
    <span v-html="item.description"></span> 
    <a href="#" @click.prevent="toggle = 0">Show less...</a> 
</article>

但那就意味着摘錄/描述包裹着<span>。有沒有辦法使用v-html指令而不輸出包裝標籤？

來源

2017-08-17 Craig Ward

它的工作原理使用'template'像https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt？ –

不知道我會選擇這個模板作爲它的兩個元素。我只是希望不輸出包裝標籤，就像你可以使用插槽 –

這就是Vue處理模板標籤的原因：允許你將綁定放在生成的HTML中沒有標籤的東西上。 –

我會什麼樣做的是（不起作用）

<article v-if="toggle"> 
    <template v-html="item.description"></template> 
    <a href="#" @click.prevent="toggle = 0">Show less...</a> 
    </article>

，但事實證明，使用template這種方式只與控制流指令（v-for和v-if）的作品。所以我想，如果我可以圍繞它偷偷加入了控制流指令的template標籤（也不起作用）

<article v-if="toggle"> 
    <template v-if="toggle" v-html="item.description"></template> 
    <a href="#" @click.prevent="toggle = 0">Show less...</a> 
    </article>

或通過將v-html上article標籤（當然不）

<article v-if="toggle" v-html="item.description"> 
    <a href="#" @click.prevent="toggle = 0">Show less...</a> 
    </article>

這給我留下了，我知道會工作兩個選項：

（1）使用的標籤。與使用span相比略有改進的是使用自定義標籤，該標籤保證瀏覽器不會以任何方式使用默認樣式。該標籤包含在HTML中，但不會影響顯示效果，而不會影響顯示效果。

<article v-if="toggle"> 
    <non-styled v-html="item.description"></non-styled> 
    <a href="#" @click.prevent="toggle = 0">Show less...</a> 
    </article>

（2）使用自定義指令。儘管v-html替換了其元素的整個innerHTML，但您當然可以編寫指令在其元素的開頭（或結尾）插入其值，而不是刪除其他所有元素。

<article v-if="toggle" v-start-with-html="item.description"> 
    <a href="#" @click.prevent="toggle = 0">Show less...</a> 
    </article>

這是一個非常簡單的命令，儘管我確信我的實現在處理節點更新方面處於欠考慮狀態。

directives: { 
    startWithHtml: { 
     inserted(el, binding) { 
     el.insertAdjacentHTML('afterbegin', binding.value); 
     } 
    } 
    }

來源

2017-08-17 13:33:33

抑制v-html包裝標籤

回答

相關問題