<div class="top">
   <div class="container">
    <a href="#" class="loge"></a>//loge圖片
//導(dǎo)航欄內(nèi)容
    <div class="header-navs">
     <ul class="navs">
       <li v-for="item in navs" class="nav">
        <template v-if="item.type">
         <a href="javascript: void(0);" class="nav-item" 
                       @mouseenter="evtHeaderEnter(item.type)" @mouseleave="evtHeaderLeave()">{{item.name}}</a>             
                </template>
        <template v-else>
          <a :href="item.sourceUrl" target="_blank" class="nav-item">{{item.name}}</a>
        </template>
             </li>
      </ul>
    </div>
//搜索框
    <div class="header-search">
        <ul class="hot-word" transition="fadeOut" v-show="hotStatus">
          <li class="hot-item" v-for="item in hotItems">{{item}}</li>
        </ul>
        <input @focus="evtIptFocus" @blur="evtIptBlur" class="search-ipt" type="search" name="search" value="">
        <label class="search-btn" for="search"><i class="icon-search"></i></label>
        <ul class="search-result clearfix">
                   <li v-for="item in results">
             <span class="item-name">{{item.name}}</span>
             <span class="item-num">約有{{item.number}}件</span>
        </li>
            </ul>
    </div>
</div>
//隱藏的導(dǎo)航欄的具體內(nèi)容
<div class="header-menu" @mouseenter="evtHeaderEnter()" @mouseleave="evtHeaderLeave()" v-show="headerStatus"  transition="fadein">
    <ul class="menus clearfix">
      <li class="product" v-for="item in currentPhones">
        <a :href="item.sourcePath">
        <img :src="item.imgUrl" alt="" class="product-img"/>
       </a>
      <div class="product-name">{{item.name}}</div>
       <div class="product-price">{{item.price}}</div>
    </li>
    </ul>
</div>
</div>

//這里就主要寫方法捶障，數(shù)據(jù)自己隨意添加
export default {
    data (){
return {
            hotStatus: true,
            headerStatus: false,
            tids: '',
            currentPhones: this.xiaomi,
            hotItems: ['紅米pro', '小米筆記本air'],
}
methods: {
        evtIptFocus () {
            $('.header-search').addClass('search-active')
            $('.search-result').show()
            this.hotStatus = false
        },
        evtIptBlur () {
            $('.header-search').removeClass('search-active')
            $('.search-result').hide()
            this.hotStatus = true
        },
        evtHeaderEnter (menuType) {
            if (menuType) {
                this.currentPhones = this[menuType]
            }
            this.headerStatus = true
            clearTimeout(this.tids)
        },
        evtHeaderLeave () {
            let self = this
            this.tids = setTimeout(function () {
                self.headerStatus = false
            }, 300)
        }
    },
}
如果想看完整的項(xiàng)目請搜：https://github.com/wendaosanshou/mi-by-vue