快捷導(dǎo)航

vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果

更新時(shí)間：2018年09月29日 16:31:01 作者：會(huì)游泳de哈士奇

hover是css中的選擇器，用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下

使用Vue來實(shí)現(xiàn)鼠標(biāo)懸停效果。可以使用事件處理器v-on指令（簡寫為：@）來完成。為標(biāo)簽綁定mouseenter以及mouseleave事件即可。

hover是css中的選擇器，用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。所以a:hover可用于設(shè)置當(dāng)鼠標(biāo)懸停在超鏈接之上時(shí)超鏈接的樣式。

在當(dāng)今比較流行的前端框架里 vue react 都是以數(shù)據(jù)驅(qū)動(dòng)的形式來修改元素的狀態(tài), 而并非是之前使用jq來操作dom元素, 這樣效率也是非常低的, 像vue, react 都是以虛擬dom的形式渲染頁面, 以數(shù)據(jù)的變化來更新虛擬dom, 從而更新頁面.

jquery 來實(shí)現(xiàn)

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名來實(shí)現(xiàn)

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

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

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

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

hover的時(shí)候讓hoverIndex等于hover的li,點(diǎn)擊時(shí)候一樣

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

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

@mouseout="hoverIndex = -1"

然后利用 hoverIndex 和 clickIndex 來給li不同的class名實(shí)現(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的是第幾個(gè)li 初始為 -1 或 null 不能為0 0表示第一個(gè)li
       clickIndex: -1, //表示當(dāng)前點(diǎn)擊的是第幾個(gè)li 初始為 -1 或 null 不能為0 0表示第一個(gè)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>

總結(jié)

以上所述是小編給大家介紹的vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: