vue v-for實現hover效果,點擊效果

<template>

    <ul class="item">

        <li v-for="(item, index) in Arr" :key="index"

            :class="{'hoverBg':index==hoverIndex}"

            @mouseover="hoverIndex = index"

            @mouseout="hoverIndex = -1">

            {{item}}

        </li>

    </ul>

</template>

<script>

export default {

    data: function(){

        return {

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

            hoverIndex: -1, //表示當前hover的是第幾個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>