怎么在vue中利用v-for實現(xiàn)一個hover點擊效果？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

為湯陰等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及湯陰網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、湯陰網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、武清ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的武清網(wǎng)站制作公司

1.給li來綁定hover事件

@mouseover="hover(index)"

2.在hover函數(shù)內(nèi)去操作dom eq選中當(dāng)前hover的li去修改它的樣式, siblings()選中其他的li修改樣式

hover: function(index){
  console.log(index);
  $('ul li').eq(index).css({
    'background': '#ccc',
    'color': '#fff'
  }).siblings().css({
    'background': '#fff',
    'color': '#333'
  })
}

vue 利用不同的class名來實現(xiàn)

首先寫兩個不同狀態(tài)的樣式

.hoverBg{
  background: #ccc;
  color: #fff;
}
.clickBg{
  background: red;
  color: #fff;
}

然后給兩個狀態(tài)綁定兩個值

export default {
  data: function(){
    return {
      itemArr:['A','B','C','D'],
      hoverIndex: -1, //表示當(dāng)前hover的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li
      clickIndex: -1, //表示當(dāng)前點擊的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li
    }
  },
}

hover的時候讓hoverIndex等于hover的li,點擊時候一樣

@mouseover="hoverIndex = index"
@click="clickIndex = index"

鼠標(biāo)移出又取消移出狀態(tài) 即讓hover的li為 -1 或 null

@mouseout="hoverIndex = -1"

然后利用 hoverIndex 和 clickIndex 來給li不同的class名 實現(xiàn)效果

:class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"

用的熟練了就可以做出更多的東西,不同li渲染不同的樣式

全部代碼如下:

<template>
  <ul class="item">
    <li v-for="(item, index) in itemArr" :key="index"
      :class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"
      @click="clickIndex = index"
      @mouseover="hoverIndex = index"
      @mouseout="hoverIndex = -1">
      {{item}}
    </li>
  </ul>
</template>

<script>
 export default {
   data: function(){
     return {
       itemArr:['A','B','C','D'],
       hoverIndex: -1, //表示當(dāng)前hover的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li
       clickIndex: -1, //表示當(dāng)前點擊的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li
     }
   },
 }
</script>

<style>
 .item{
   width: 600px;
   height: 60px;
 }
 .item li{
   width: 80px;
   height: 60px;
   line-height: 60px;
   margin-left: 20px;
   float: left;
   text-align: center;
   cursor: pointer;
 }
 .hoverBg{
   background: #ccc;
   color: #fff;
 }
 .clickBg{
   background: red;
   color: #fff;
 }
</style>

關(guān)于怎么在vue中利用v-for實現(xiàn)一個hover點擊效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

網(wǎng)頁名稱：怎么在vue中利用v-for實現(xiàn)一個hover點擊效果
網(wǎng)站鏈接：http://jinyejixie.com/article10/jjiego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站設(shè)計、響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、營銷型網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)