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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 検索エンジンのウェブサイトの入り口の無料コレクション
推薦する
JavaScript の高度なプログラミングの基本参照型
目次1. 日付2. 正規表現3. オリジナルパッケージタイプ序文：参照値（オブジェクト）は、 Dat...
this.parentNode.parentNode (親ノードの親ノード) はどういう意味ですか?
親ノードの親ノード、例えば、このような段落がありますHTML:コードをコピーコードは次のとおりです。...
Nginxを再コンパイルしてモジュールを追加する方法
Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...
Tomcat サーバーが tomcat7w.exe を開けない場合の解決策
今日、Tomcat サーバーの設定時にちょっとした問題が発生したので、参考までにいくつかご説明したい...
Docker を使用して pypi プライベート リポジトリを構築する方法
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
HTMLにおけるbackground-image属性の設定の詳細な説明
写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...
SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明
目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...
Webサービスのリモートデバッグとタイムアウト動作原理の分析
Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...
MySQL および Oracle のバッチ挿入 SQL の一般的な記述例
目次例えば：一般的な執筆:要約する例えば：次に、データベースのUSERテーブルにUserオブジェクト...
Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)
フロントエンド プロジェクトでは、添付ファイルのアップロードは非常に一般的な機能であり、ほぼすべての...
Web デザイン: Web ミュージックの実装テクニック
<br />Web ページに音楽を挿入する場合、サフィックスに応じて異なるコードを記述す...
WeChatミニプログラムは同時通訳を利用して音声認識を実装します
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...
Linux CentOS でスクリプトを定期的に実行するように設定する方法
多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...
Uniappの小規模プログラム開発経験
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...
MySQL関数の包括的な概要
目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...