カード間のライブ検索

Question

私はこのカードの上に50枚のカードを持ったページを持っています。私は入力フォームを持っています。ユーザーが1つの文字を（入力フォームで）入力すると、このカードがなくなったカードはすべて消え、この文字のカードだけが残ります。あなたはこれを実現する方法をアドバイスしていますか？

Answer 1

これ以上行うには、フレームワークの使用を検討する必要があります。 あなたがvanilla jsでそれをしたいのであれば、入力フィールドにリスナーを設定し、すべてのチェックの後にすべてのカードを通り、style = "display：block || display：none"を設定します。私はバニラとしようと、

<template> 
<input v-model="filter" placeholder="filter"> 
<div v-if="check(card)" v-for="card, cardIndex in cards"> 
{{card.name}} 
</div> 
</template> 
.... 

data: 
filter: '', 
cards: [{name: 'card1', date: ...}, ...] 

methods: 
check() { 
    return this.filter.length === 0 || check.split(this.filter).length !== 1 
}