vuejs 內置組件component實現tab切換懶加載和表單輸入框內容的清空

K_B_Z 發布于2019-08-21 11:42 / 3195人閱讀

摘要：使用實現切換中的實現對應的文件的懶加載在父組件中很多個按鈕每個對應的內容都是不一樣的，沒有辦法做成同一個模板來實現內容的顯示。使用內置組件實現了這個功能。

最近項目中使用了vue2.0 官網腳手架進行了開發。開發中的踩一些坑一直沒有來得及整理。本篇文章就vuejs內置組件component的一些使用進行一些總結。

1.使用component 實現tab切換中的實現對應的文件的懶加載

在父組件中很多個tab按鈕,

每個tab對應的內容都是不一樣的，沒有辦法做成同一個模板來實現內容的顯示。但不能一上來就將所有的內容都加載上來，因為很多時候，客戶是不可能查看所有的內容的。
一開始，我們使用了路由：

使用了路由實現了懶加載，隨后發現，如果在tab點擊多次的話，就會產生一個問題就是，點擊回退按鈕的時候，tab顯示會蹦來蹦去的，知道所有的歷史記錄倒退完了，怎么解決既能實現懶加載又不出現tab蹦來蹦去的現象。使用vuejs 內置組件component實現了這個功能。

使用element-ui中的tab標簽和component結合實現了這個功能：

這樣實現了tab切換使用懶加載。

2.表單輸入框刷新

在一個頁面中：

點擊添加按鈕如何實現添加輸入框顯示：

但是添加成功后，當再次添加時，上次輸入的內容還在，

如何清除上次的內容呢，使用v-if只是實現輸入框的顯示與隱藏，無法實現清空內容，component組件又一次派上用場了。

這樣就實現了錄入后輸入組件的清空

GPU云服務器云服務器輸入框內容清空 js實現數據的懶加載圖片 java表單框的組件 js實現tab切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87001.html

基于 Vue 的后臺管理系統前端實踐

摘要：輸入框內容過濾產品有一個需求是，在搜索用戶信息時，只能通過郵箱搜索，并且只能輸入字母數字以及。我選擇了輸入框的值這里的坑就是需要在中更新值，因為元素這時才刷新。是否有一定要用的必要類似的管理系統涉及到不同頁面之間的交互都很少。初始化項目使用 Vue-cli3 初始化項目1 安裝 Element UI安裝 Vue-i18n，做相關配置2,3 原則上需要對 Element 也做 I18...

scwang90 2019-08-23 12:13 評論0 收藏0
采用vue+webpack構建的單頁應用——私人博客MintloG誕生記

摘要：我采用原生編寫后臺，因為感覺增刪改查的功能很簡單，就懶得用框架了其實是不會。瀏覽模式它也有一個，用來切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進行文章的撰寫與修改。介紹項目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）showImg(https://segmentfault.com/img/b...

Terry_Tai 2019-06-27 12:09 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

CNZPH 2019-08-02 15:56 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

pekonchan 2019-08-20 12:32 評論0 收藏0