1.實現大致是如下效果
2.搜尋元件的頁面結構
class="search">
class="search-input" type="text" placeholder="輸入城市名或者拼音"/>
class="search-content" v-show="keyword" ref="search">
接收父元件的傳值和定義變數
props:,
data()
} 監聽keyword
watch :
if(!this.keyword)
this.timer=settimeout(() =>
});
} this.list=result
}, 100);
} },
4.給查詢到的search-content資料繫結better-scroll元件，使其資料量大的時候可以滑動
//在頁面掛載完執行
mounted()
6.當沒有匹配的資料的時候，顯示為"沒有匹配的資料"，設定v-show="hasnodata"
computed:
}
vue 查詢元件 搜尋元件封裝
由乙個元件，向上找到最近的指定元件 function findcomponentupward context,componentname return parent 由乙個元件，向上找到所有的指定元件 function findcomponentsupward context,componentna...
回顧 城市元件 watch
watch vue的偵聽器，在資料變化時響應非同步或開銷比較大的操作時，限制執行操作的頻率，在得到最終結果前，可以設定中間狀態。監聽某個值的操作，然後做非同步操作。v model 在表單元素上建立資料雙向繫結。通過data宣告初始值後，才能使用。函式防抖 觸發事件後，n秒內函式只執行一次，如果在n秒...
vue元件引入另一vue元件
個人blog，歡迎關注加收藏 在元件中引入另一組件 元件化開發，最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中 時，可以將其提出單獨組成乙個元件。重複使用。如下圖 其中底部導航條的部分 就會出現在多個元件中 在當前元件card.vue中引入barbottom.vue的步驟如下 在car...