vue v-for实现hover效果,点击效果

最新推荐文章于 2023-06-28 14:19:25 发布

ZhouMin8877

最新推荐文章于 2023-06-28 14:19:25 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue

原文链接：https://www.jianshu.com/p/6f841d5a6090

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


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