Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換？如何實(shí)現(xiàn)Tab選項(xiàng)卡內(nèi)容的懶加載？小白，一個(gè)還在成長(zhǎng)的前端工程師，如果有什么錯(cuò)誤，以后要學(xué)會(huì)改正！制表符切換在項(xiàng)目中使用得太頻繁。為了提高性能，只需進(jìn)入頁(yè)面并要求

Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換？

如何實(shí)現(xiàn)Tab選項(xiàng)卡內(nèi)容的懶加載？

小白，一個(gè)還在成長(zhǎng)的前端工程師，如果有什么錯(cuò)誤，以后要學(xué)會(huì)改正！制表符切換在項(xiàng)目中使用得太頻繁。為了提高性能，只需進(jìn)入頁(yè)面并要求他在當(dāng)前頁(yè)面中只加載一個(gè)選項(xiàng)卡。這樣，一旦進(jìn)入頁(yè)面，所有數(shù)據(jù)都將被加載。如果數(shù)據(jù)太多，用戶將等待加載數(shù)據(jù)。用戶體驗(yàn)很差?，F(xiàn)在項(xiàng)目使用元素UI的tab效果。其原理是顯示和隱藏顯示。這里的問題是，這種隱藏是看不到的，但是DOM渲染仍然會(huì)被渲染。因此，為了解決這個(gè)問題，我們使用V-IF讓當(dāng)前頁(yè)面為真，下一個(gè)頁(yè)面為假，這樣當(dāng)你點(diǎn)擊時(shí)，你可以在你點(diǎn)擊的標(biāo)簽下請(qǐng)求創(chuàng)意。當(dāng)然，你不能總是讓它是V-IF，否則性能會(huì)更差，所以我們以后可以繼續(xù)點(diǎn)擊哪個(gè)選項(xiàng)卡是true，記住其他選項(xiàng)卡不需要改為false，因?yàn)檫@些元素UI已經(jīng)完成，以后會(huì)自動(dòng)繼續(xù)顯示，這樣就不需要頻繁地操作DOM，提高了DOM的性能。我不知道是否有什么錯(cuò)誤。如果有任何錯(cuò)誤，請(qǐng)?jiān)徫?。稍后，我將更?/p>

這三個(gè)子組件的代碼引用，分別是：

JS，使用本地組件來(lái)引入這三個(gè)子組件

//data（）{

return{

A:“tab1”//默認(rèn)顯示tab1子組件

}

]組件：{

“tab1”：tab1，

“TAB2”：TAB2“tab3”：tab3

}