怎么使用Vue實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能

今天小編給大家分享一下怎么使用Vue實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

首先將所有的選中后圖片都覆蓋到?jīng)]選中圖片上

html代碼如下

 <ul>
  <li>
  <a href="">
  <img src="../../../img/goods/study.png" alt="學(xué)習(xí)">
  <img class="hide_tab" src="../../../img/goods/study_1.png" alt="學(xué)習(xí)">
  </a>
  </li>
  <li>
  <a href="">
  <img src="../../../img/goods/life.png" alt="生活">
  <img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
  </a>
  </li>
  <li>
  <a href="" >
  <img src="../../../img/goods/sport.png" alt="運(yùn)動(dòng)">
  <img class="hide_tab" src="../../../img/goods/sport_1.png" alt="運(yùn)動(dòng)">
  </a>
  </li>
  <li>
  <a href="">
  <img src="../../../img/goods/clothes.png" alt="服飾">
  <img class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服飾">
  </a>
  </li>
  <li>
  <a href="" >
  <img src="../../../img/goods/hat.png" alt="鞋帽">
  <imgclass="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽">
  </a>
  </li>
  <li>
  <a href="" >
  <img src="../../../img/goods/food.png" alt="食品">
  <img class="hide_tab" src="../../../img/goods/food_1.png" alt="食品">
  </a>
  </li>
  <li>
  <a href="">
  <img src="../../../img/goods/other.png" alt="其他">
  <img class="hide_tab" src="../../../img/goods/other_1.png" alt="其他">
  </a>
  </li>
 </ul>

css代碼如下

.right {
 float: left;
 ul {
 margin-left: 1px;
 li {
  display: inline-block;
  margin-left: 12px;
  width: 100px;
  height: 100px;
  a{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  .hide_tab{
  position: absolute;
  bottom: 0;
  }
  }
 }
 }
 }

其實(shí)就是很簡(jiǎn)單的通過(guò)position:absolute進(jìn)行了布局，現(xiàn)在選中樣式的圖片已經(jīng)全部覆蓋到了沒(méi)有選中樣式圖片之上了。

接下來(lái)就需要一個(gè)變量控制他們的顯隱。這個(gè)變量應(yīng)該是一個(gè)和每個(gè)分類一一對(duì)應(yīng)的，那這個(gè)變量就不應(yīng)該是一個(gè)簡(jiǎn)單的布爾值，而是一個(gè)數(shù)字，和每個(gè)分類圖片對(duì)應(yīng)。

我定義這個(gè)變量叫做active，在data中聲明

data(){
 return{
 active: 0
 }
}

再定義一個(gè)方法控制active變量的變化

showActive(index) {
 this.active = index;
}

方法中的index參數(shù)就是鼠標(biāo)懸浮時(shí)傳入的值

修改html代碼如下

 <ul>
  <li>
  <a href="" @mouseenter="showActive(1)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/study.png" alt="學(xué)習(xí)">
  <img v-show="active === 1" class="hide_tab" src="../../../img/goods/study_1.png" alt="學(xué)習(xí)">
  </a>
  </li>
  <li>
  <a href="" @mouseenter="showActive(2)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/life.png" alt="生活">
  <img v-show="active === 2" class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
  </a>
  </li>
  <li>
  <a href="" @mouseenter="showActive(3)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/sport.png" alt="運(yùn)動(dòng)">
  <img v-show="active === 3" class="hide_tab" src="../../../img/goods/sport_1.png" alt="運(yùn)動(dòng)">
  </a>
  </li>
  <li>
  <a href="" @mouseenter="showActive(4)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/clothes.png" alt="服飾">
  <img v-show="active === 4" class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服飾">
  </a>
  </li>
  <li>
  <a href="" @mouseenter="showActive(5)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/hat.png" alt="鞋帽">
  <img v-show="active === 5" class="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽">
  </a>
  </li>
  <li>
  <a href="" @mouseenter="showActive(6)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/food.png" alt="食品">
  <img v-show="active === 6" class="hide_tab" src="../../../img/goods/food_1.png" alt="食品">
  </a>
  </li>
  <li>
  <a href="" @mouseenter="showActive(7)" @mouseleave="showActive(0)">
  <img src="../../../img/goods/other.png" alt="其他">
  <img v-show="active === 7" class="hide_tab" src="../../../img/goods/other_1.png" alt="其他">
  </a>
  </li>
 </ul>

只有在當(dāng)前index和active相等時(shí)，才會(huì)顯示已選中分類的圖片。而鼠標(biāo)離開(kāi)時(shí)，傳入一個(gè)沒(méi)有與之對(duì)應(yīng)的0，這樣就沒(méi)有顯示了。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

以上就是“怎么使用Vue實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。