Vue 2.6版本引入了Fragment(片段)標簽。所謂的Fragment,就是可以讓我們在Vue組件中返回多個根節點。
在Vue 2.6以前,每個Vue組件必須只有一個根節點,這給我們在編寫模板的時候帶來了很多限制,比如不能在組件中使用共享的模板代碼等。但隨著Fragment的引入,我們可以通過在組件中使用Fragment標簽,來解決這些限制。
// 上面的代碼之前只能返回一個div標簽作為根節點這是一個標題
- {{ item.name }}
// 上面的代碼使用Fragment可以返回多個節點 這是一個標題
- {{ item.name }}
Fragment標簽在Vue 2.6版本默認是不可見的,因為它并不是一個真正的HTML元素,所以不會被渲染到頁面上。但是通過設置v-cloak
指令,我們可以讓它在渲染之前隱藏起來,渲染完成后再顯示出來。
// 上面的代碼中,Fragment標簽內有兩個按鈕,因為Fragment標簽默認不可見,所以兩個按鈕不會在頁面上顯示出來,而是在渲染完成后才會顯示。同時添加了v-cloak指令來隱藏Fragment標簽。
- {{ item.name }}
總之,Fragment標簽為我們提供了更多的靈活性和可讀性,讓我們可以更加方便地編寫Vue組件。對于一些需要使用共享模板或者需要返回多個根節點的場景,使用Fragment標簽是一個非常好的選擇。
上一篇python 執行2次
下一篇vue foucus