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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 検索エンジンのウェブサイトの入り口の無料コレクション
推薦する
Windows 10 での MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル
この記事では、最新バージョンの MySQL データベース、つまり MySQL 5.7.17 圧縮バー...
シンプルな画像ドラッグ効果を実現する js
この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...
JavaScriptはランダムコードの生成と検証を実現する
JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。イベ...
MySQL統計データテーブルの設計方法
目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...
Vue で wangeditor リッチテキスト編集を使用する際の問題
wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...
Docker ベースの Redis クラスターの構築方法
Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...
HTML タグ dl dt dd 使用方法
基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...
Node.js で Bash スクリプトを書くための究極のソリューション
目次序文zxライブラリ$`コマンド` CD（）フェッチ（）質問（）寝る（）スローしない()チョークフ...
react setStateの詳細な説明
目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...
Gitlab実践チュートリアルでは、関連する設定操作にgit configを使用します。
この記事では、実際に発生した問題をもとに、git の設定に関する内容を紹介します。コマンド: git...
MySQLストアドプロシージャにおけるカーソル（DECLARE）の原理と使い方の詳細な説明
この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...
CentOS7でMySQL 5.7をアンインストールする方法
MySQLに何がインストールされているか確認する rpm -qa | grep -i mysql n...
Windows 10 インストール vmware14 チュートリアル図
ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....
Linux でスワップ領域を確認する 5 つのコマンドの概要
序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...
ログインスライダー検証を実装するJavaScript
この記事では、ログインスライダー検証を実装するためのJavaScriptの具体的なコードを参考までに...