Vue中的input組件提供了一個onkeyup的屬性，用于在輸入框中敲擊鍵盤時觸發(fā)一個方法。這個方法可以用來動態(tài)地響應(yīng)用戶的輸入，比如實時地過濾列表或從服務(wù)器獲取數(shù)據(jù)等。

<template>
<div>
<input type="text" v-model="search" @keyup="handleKeyUp">
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
items: ['apple', 'banana', 'cherry', 'orange']
}
},
methods: {
handleKeyUp() {
this.items = this.items.filter(item =>item.includes(this.search))
}
}
}
</script>

在上面的代碼中，我們定義了一個input組件和一個items數(shù)組。input組件使用了v-model指令來雙向綁定search屬性，每次輸入時都會觸發(fā)handleKeyUp方法。

handleKeyUp方法中使用了filter方法來根據(jù)search屬性過濾items數(shù)組中的項。具體來說，它創(chuàng)建一個新數(shù)組，其中包含所有回調(diào)函數(shù)返回 true 的原始數(shù)組元素。在這個例子中，回調(diào)函數(shù)檢查items數(shù)組中的每個項是否包含search屬性。如果包含，則該項被添加到新數(shù)組中。

通過這種方式，我們可以在輸入框中快速地實現(xiàn)實時搜索和過濾的效果。它是一個簡單但非常有用的功能，在開發(fā)Vue應(yīng)用時非常適用。