vue之延時刷新實例
更新時間：2019年11月14日 10:20:05 作者：兮川
今天小編就為大家分享一篇vue之延時刷新實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
當(dāng)我們要做一個實時搜索時，用watch監(jiān)控數(shù)據(jù)，當(dāng)數(shù)據(jù)不斷變化時，不可能立刻進(jìn)行接口的請求，這樣會給服務(wù)器帶來麻煩，使服務(wù)器負(fù)載加重，此時就需要一個延時加載機(jī)制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xichuan</title>
<link rel="stylesheet" rel="external nofollow" />
<<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
</head>
<body>
<div id="test">
<el-input id="inputSearch" placeholder="輸入關(guān)鍵字搜索" suffix-icon="el-icon-search" size="mini" v-model="search"></el-input>
{{show}}
</div>
</body>
<script>
new Vue({
el: '#test',
data: {
search:'',
show:'',
timer: null,
},
watch:{
search:function(val, oldVal){
//當(dāng)不斷輸入字符時，因為延時執(zhí)行還沒有開始，就被清除，然后重新生成新的延時器
//雖然不停的清除，生成新的延時器，但在輸入的時候延時器內(nèi)部的方法都一直沒有被執(zhí)行
clearTimeout(this.timer); //清除延遲執(zhí)行
this.timer = setTimeout(()=>{ //設(shè)置延遲執(zhí)行
console.log('search:'+val+','+oldVal);
this.show = this.search;
},1000);
}
}
});
</script>
<style>
#inputSearch{
width: 200px;
left: 20px
}
</style>
</html>
以上這篇vue之延時刷新實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06
基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果
在vue項目中,我們通常會使用Axios來與后臺進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請求時,常常需要在頁面上顯示一個加載框（Loading）,然后等數(shù)據(jù)返回后自動將其隱藏,本文介紹了基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3的自定義hook函數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3和ts封裝axios以及使用mock.js的相關(guān)資料,文章通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue中的核心就是組件，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，下面通過本文重點給大家介紹vue 創(chuàng)建組件及組件使用方法，感興趣的朋友一起看看吧2017-07-07
這篇文章主要介紹了Vue.directive使用注意(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue實現(xiàn)樹形結(jié)構(gòu)樣式和功能的實例代碼
這篇文章主要介紹了vue樹形結(jié)構(gòu)樣式和功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue項目無法刪除的問題及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue頁面跳轉(zhuǎn)傳遞參數(shù)及接收方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09