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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 検索エンジンのウェブサイトの入り口の無料コレクション
推薦する
CSSブロッキングマージとその他の効果についての簡単な説明
非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...
MySQLプロセス関数の一般的な使用例の分析
この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...
mysql57サービスが突然消えた問題をすぐに解決する
1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...
CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。
画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...
Reactにおける不変値の説明
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明
この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...
JavaScript Three.js でテキストを作成する最初の経験
目次効果テキストの作成を開始するまずフォントローダーを作成するフォントライブラリを読み込むテキストジ...
Javascriptのクロージャとアプリケーションの詳細な説明
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
面接でよく聞かれる Vue 修飾子 13 個
目次1. 怠惰な2.トリム3.番号4.停止5. キャプチャ6.自分7.一度8.予防する9.ネイティブ...
Reactのコンポーネント作成方法のまとめ
目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...
node.js チュートリアルの Util モジュールの例の詳細な説明
目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...
Web面接でよくある質問：リフローとリペイントの原理と違い
目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為：再描画再描画を引き...
MySQL 8.0.21 のインストール手順と問題解決
公式サイトをダウンロードまず公式ウェブサイトにアクセスしてMySQLをダウンロードしてくださいリンク...
Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。
目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...
iframe でページを開く方法
解決：リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...