怎么在vue中利用v-for實現一個hover點擊效果?針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
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渲染不同的樣式
全部代碼如下:
<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, //表示當前hover的是第幾個li 初始為 -1 或 null 不能為0 0表示第一個li clickIndex: -1, //表示當前點擊的是第幾個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>
關于怎么在vue中利用v-for實現一個hover點擊效果問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。