大概步驟：

目標效果

五、搜尋結果列表佈局

• 要點：
  • 根據li陣列項的type區分當前項是歌手和歌曲
  • 區分後dom渲染不同的內容
• SearchSuggest.vue

<ul>
	<li v-for="item of result">
		<i class="iconfont " :class="_otherIcon(item)">
			<img 
				v-if="item.type ==='singer'" 
				width="40" 
				height="40" 
				:src="_getSingerImg(item)"/>
 

		</i>
		<div class="search-suggest_text">
			<h3>{{resultTitle(item)}}</h3>
			<p>{{resultDics(item)}}</p>
		</div>
	</li>
</ul>

//標題文字
	resultTitle(item){
      //當資料是歌手的時候展示歌手資料
      if(item.type===TYPE_SINGER){
        return item.singername
      }
 
else{
        return item.name
      }
    },
//描述文字
    resultDics(item){
      //同理
      if(item.type===TYPE_SINGER){
        return item.songnum
      }else{
        return item.singer
      }
    },
//圖示或者歌手頭像的class，利用icofont的class
    _otherIcon(item){
      if(item.type===TYPE_SINGER){
        return
 
 'search-suggest_img'
      }else{
        return 'icon-yinyue search-suggest_icon'
      }
    },
     //判斷獲取歌手圖片
    _getSingerImg(item){
      return `https://y.gtimg.cn/music/photo_new/T001R68x68M000${item.singmid}.jpg?max_age=2592000`
    },

/*只展示部分樣式程式碼*/
.search-suggest{
    position: absolute;
    top: 60px;
    width: 100%;
    bottom: 0;
    overflow: hidden;
  }
  .search-suggest ul li{
    display: flex;
    height: 55px;
  }
  .search-suggest ul li i{
    flex: 0 0 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .search-suggest_img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .search-suggest_text{
    flex: 1;
    box-sizing: border-box;
  }

• 圖片src需要跨域才能獲取

專案來源：慕課網 如有建議和疑問可聯絡 QQ：1017386624 郵箱：[email protected]