Vueは小さな検索機能を実装する
|
この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル></タイトル>
</head>
<本文>
<div id="アプリ">
<input type="text" v-model="keyword" placeholder="キーワードを入力" />
<div class="list">
<div class="item" v-for="fFruit 内の item" :key="item">
{{アイテム}}
</div>
</div>
</div>
</本文>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
新しいVue({
el:"#アプリ",
データ（）{
戻る {
キーワード：""、
フルーツ：
「リンゴ」、「サンドアップル」、「ベゴニア」、「アロニア」、「ビワ」、「サンザシ」、「サンザシ」、「ナシ」、
「スノーペア」、「キンセア」、「ローズヒップ」、「ラノン」、「アプリコット」、「チェリー」、「ピーチ」、「ピーチ」、
「ネクタリン」、「ピーチ」、「プラム」、「プラム」、「プルーン」、「ホワイトジェイドチェリー」、「ブラックベリー」
「ラズベリー」、「クラウドベリー」、「ローガンベリー」、「ブルネット」、「ストロベリー」、「パイナップルベリー」、「オレンジ」
「シュガーオレンジ」、「オレンジ」、「レモン」、「ライム」、「ザボン」、「キンカン」、「グレープフルーツ」、「シトロン」
「仏陀の手」、「フィンガーオレンジ」、「黄色い果物」、「マスクメロン」、「マスクメロン」、「ハニーメロン」、「トゲトゲメロン」
]
}
},
計算:{
"fフルーツ"(){
// キーワードが空の場合は、すべての果物を返します if(this.keyword==""){
this.fruit を返します。
}それ以外{
// Frui の特定のアイテムにキーワードテキストが含まれている場合、現在のデータを保持します // フィルターは保持する場合は true を返し、除外する場合は false を返します return this.frui.filter(item=>{
item.includes(this.keyword) を返す
})
}
}
}
})
</スクリプト>
</html>結果：
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 検索エンジンのウェブサイトの入り口の無料コレクション
推薦する
Linux環境でglogログライブラリを使用する方法
Linuxライブラリを生成するLinux版はcentos7.3を使用し、コンパイルしてライブラリを生...
Vue3ルーティングVueRouter4を使用する簡単な例
ルーティングvue-router4 では API の大部分は変更されていないため、変更点のみに焦点を...
jQueryはすべてのショッピングカート機能を実装します
目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...
mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル
目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...
SELinux 入門
カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...
MySQLクエリ書き換えプラグインの使用
クエリ書き換えプラグインMySQL 5.7.6 以降、MySQL Server は、サーバーが実行す...
JavaScript フォーム検証の例
HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...
MySQL 8.0 再帰クエリの簡単な使用例
序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...
MySQL DATE_FORMAT関数の使用
タオバオが、ダブル11に最も多くの注文をした2人のユーザー、ユーザー1：「ショッピングの皇帝、陳哈哈...
VMware Workstationはデバイス/資格情報ガードと互換性がありません
仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...
MySQL はデータベースを動的に更新します スクリプト例の説明
具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...
Docker に fastdfs イメージをインストールする際の注意事項
1. Docker環境を準備する2. fastdfsイメージを検索する 3. イメージをプルするdo...
MySql バージョンの問題に対する完璧なソリューション sql_mode=only_full_group_by
1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...
ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。
ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...
Vueライフサイクルの違いの詳細な説明
ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...