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

hover是css中的選擇器，用于選擇鼠標指針浮動在上面的元素。所以a:hover可用于設置當鼠標懸停在超鏈接之上時超鏈接的樣式。

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

jquery 來實現

1.給li來綁定hover事件

@mouseover="hover(index)"

2.在hover函數內去操作dom eq選中當前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名來實現

首先寫兩個不同狀態的樣式

.hoverBg{

background: #ccc;

color: #fff;

}

.clickBg{

background: red;

color: #fff;

}

然后給兩個狀態綁定兩個值

export default {

data: function(){

return {

itemArr:['A','B','C','D'],

hoverIndex: -1, //表示當前hover的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li

clickIndex: -1, //表示當前點擊的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li

}

},

}

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

@mouseover="hoverIndex = index"

@click="clickIndex = index"

鼠標移出又取消移出狀態 即讓hover的li為 -1 或 null

@mouseout="hoverIndex = -1"

然后利用 hoverIndex 和 clickIndex 來給li不同的class名 實現效果

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

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

全部代碼如下:

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

  @click="clickIndex = index"

  @mouseover="hoverIndex = index"

  @mouseout="hoverIndex = -1">

  {{item}}

export default {

data: function(){

return {

itemArr:['A','B','C','D'],

hoverIndex: -1, //表示當前hover的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li

clickIndex: -1, //表示當前點擊的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li

}

},

}

.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;

}

總結

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

總結

以上是生活随笔為你收集整理的vue图片点击超链接_vue使用v-for实现hover点击效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。