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

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

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

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
 }
 },
}

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

@mouseout="hoverIndex = -1"

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

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