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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 検索エンジンのウェブサイトの入り口の無料コレクション
推薦する
レスポンシブレイアウトについて知っておくべきこと
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
異なる列を持つテーブルのクエリ結果のSQLマージ操作
2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...
Linux7で仮想ホストを実装する3つの方法
1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...
よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...
Linux コマンドラインのワイルドカードとエスケープ文字の実装
ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...
JavaScript を使用してカルーセル効果を実装する
この記事では、カルーセルマップの特殊効果を実現するためのJavaScriptの具体的なコードを参考ま...
パーソナライズされたクリエイティブなウェブサイトデザインの例 (30)
そこで、個性的なスタジオやフリーランスを表現する組み合わせを 30 個選びました。デザインを目立たせ...
Nginx における accept lock の仕組みと実装の詳細な説明
序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...
VS2019をMySQLデータベースに接続するプロセスと一般的な問題の概要
今日の午後からVS2019をMySQLで使えるのではないかと思い、いろいろ環境構築を始めました。プロ...
DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
React は入力値を取得し、2 つのメソッドの例を送信します
方法1: DOMが提供するイベントオブジェクトのターゲットイベント属性を使用して値を取得し、送信する...
Vue 計算プロパティ実装トランスクリプト
この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりで...
ウェブページのメモリとCPU使用量を削減する方法
<br />Web ページによっては、サイズは大きくないように見えても開くのに非常に時間...
docker を使用して minio と java sdk を構築するプロセスの詳細な説明
目次1minioはシンプル2 Dockerビルド minio 2.1 単一ノード2.2 マルチノード...
JavaScript 配列を走査する 5 つの方法
目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...