1.検索コンポーネントを作成します。
<テンプレート>
の<div>
<divのクラス= "検索タイトルを">
の<input type = "text"の名= ""プレースホルダ= "输入搜索内容" V-モデル= "searchContent">
<ボタンタイプ= "ボタン" @ = "searchHandler"名前= "ボタン">搜索</ボタン>クリック
</ div>
<ulのクラス= "リストの検索リスト">
キー= "インデックス"タグ= "李"：：=に"{名前<ルータリンクを： 'MusicPlay'、paramsは：{songid：item.songid}} "クラス= "曲"= V-用"（商品、指数）songlistで">
<DIV CLASS = "左">
<DIV CLASS ="情報単-line「>
の<div>
<スパン> {{item.songname}} </スパン>
</ div>
<スパンクラス= "TXT"> {{item.artistname}} </スパン>
</ div>
</ div>
</ルーターリンク>
</ UL> </ div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名： "検索"、
データ（）{
リターン{
searchContent： ""、
songlist：[]
}
}、
メソッド：{
searchHandler（）{
CONST searchURL = this.HOST +「/ V1 / restserver / ？ティン方法= baidu.ting.search.catalogSug＆クエリ= "+ this.searchContent。
この$のaxios.get（searchURL）
.then（RES => {
IF（res.data.error_codeの== 22001）{
アラート（ '搜索数据不存在'）;
を返す;
}
this.songlist = res.data.song
}）
.catch（エラー=> {
にconsole.log（エラー）;
}）
}
}
}
</ SCRIPT>
<スタイルスコープ>
.search-タイトル{
パディング：20ピクセル;
オーバーフロー：隠されました;
クリア：両方;
}
入力{
幅：80％。
高さ：30px;
行の高さ：30px;
背景：#FFF;
国境：1pxの固体＃f1f2f3;
パディング左：10pxの;
フロート：左;
表示：インラインブロック。
}
ボタン{
フロート：左;
幅：15％;
高さ：30px;
}
.LIST {
ワードラップ：ブレークワードを;
-webkit-ハイフン：自動;
ハイフン：自動;
単語ブレーク：ブレークのすべて;
border-bottom：1pxの固体＃e5e5e5。
border-top：1pxの固体＃e5e5e5。
}
.LIST li.song {
-webkit-箱パック：正当化。
-webkit-正当化-コンテンツ：スペースの間;
-コンテンツが正当化：スペースの間;
分の高さ：55×;
テキスト整列：左;
}
李{
表示：-webkit-ボックス。
表示：-webkit-フレックス;
表示：フレックス。
-webkit-ボックスオリエント：水平;
-webkitボックス方向：正常。
-webkit-フレックス方向：行。
フレックス方向：行。
-webkit-箱パック：開始。
-webkit-正当化-コンテンツ：フレックススタート。
正当化コンテンツを：フレックススタート。
-webkit-ボックス整列：センター;
-webkit-ALIGN-アイテム：センター;
ALIGN-アイテム：センター;
オーバーフロー：隠されました;
テキストオーバーフロー：省略記号。
ホワイトスペース：NOWRAP。
-webkit-ボックスサイズ：ボーダーボックス;
ボックスサイズ：ボーダーボックス;
分の高さ：は50px;
border-bottom：1pxの固体＃F2F2F2。
パディング左：10pxの;
}
.LIST .item.song .LEFT、.LIST li.song .LEFT {
表示：-webkit-ボックス。
表示：-webkit-フレックス;
表示：フレックス。
-webkit-ボックスオリエント：水平;
-webkitボックス方向：正常。
-webkit-フレックス方向：行。
フレックス方向：行。
-webkit-箱パック：開始。
-webkit-正当化-コンテンツ：フレックススタート。
正当化コンテンツを：フレックススタート。
-webkit-ボックス整列：センター;
-webkit-ALIGN-アイテム：センター;
ALIGN-アイテム：センター;
-webkit-ボックスフレックス：1;
-webkit-フレックス：1;
フレックス：1;
オーバーフロー：隠されました;
テキストオーバーフロー：省略記号。
ホワイトスペース：NOWRAP。
}
.info .item .LIST、.LISTのLiの.info {
-webkitボックスフレックス：1。
-webkit-フレックス：1;
フレックス：1;
オーバーフロー：隠されました;
テキストオーバーフロー：省略記号。
ホワイトスペース：NOWRAP。
}
.LISTのLiの.info>スパン{
フォント重量：400。
表示ブロック;
フォントサイズ：12ピクセル;
色：＃999;
}
</スタイル>