揭秘：Vue 列表鼠标悬浮样式改变的终极秘诀

2023-05-08 07:22:46

用 Vue 为列表实现鼠标悬浮时样式改变

在 Vue.js 中，为列表项添加鼠标悬浮时样式改变效果是一项常见的需求，因为它可以帮助用户快速识别和选择列表中的项目。通过结合 Vue 和 CSS，您可以轻松实现这种效果，让您的列表更加交互式和美观。

步骤 1：设置 HTML 和 CSS

首先，在 HTML 中创建一个简单的列表，其中包含您想要添加样式改变效果的项目：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

接下来，在 CSS 中为列表项添加一个默认样式类：

.list-item {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

最后，为列表项的鼠标悬浮样式添加一个新的类：

.list-item:hover {
  background-color: #eee;
}

步骤 2：添加 Vue 组件

接下来，在您的 Vue 组件中，导入必要的库并定义一个数据对象来存储列表项数据：

import Vue from 'vue'
import { ref } from 'vue'

export default {
  setup() {
    const items = ref([
      '项目 1',
      '项目 2',
      '项目 3'
    ])

    return {
      items
    }
  }
}

步骤 3：应用鼠标悬浮样式

要应用鼠标悬浮样式，请使用 Vue 的 v-bind 指令将悬浮样式类绑定到列表项：

<ul>
  <li v-for="item in items" :key="item" :class="{'list-item': true, 'list-item-hover': hover}">
    {{ item }}
  </li>
</ul>

我们还可以在组件中定义一个响应式变量 hover 来跟踪鼠标悬浮状态：

export default {
  setup() {
    const items = ref([
      '项目 1',
      '项目 2',
      '项目 3'
    ])

    const hover = ref(false)

    return {
      items,
      hover
    }
  }
}

最后，使用 v-on:mouseenter 和 v-on:mouseleave 指令来分别在列表项上触发鼠标悬浮和鼠标离开事件：

<ul>
  <li v-for="item in items" :key="item" :class="{'list-item': true, 'list-item-hover': hover}" @mouseenter="hover = true" @mouseleave="hover = false">
    {{ item }}
  </li>
</ul>

代码示例

以下是一个完整代码示例，演示了如何在 Vue.js 中为列表实现鼠标悬浮时样式改变：

<template>
  <ul>
    <li v-for="item in items" :key="item" :class="{'list-item': true, 'list-item-hover': hover}" @mouseenter="hover = true" @mouseleave="hover = false">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import Vue from 'vue'
import { ref } from 'vue'

export default {
  setup() {
    const items = ref([
      '项目 1',
      '项目 2',
      '项目 3'
    ])

    const hover = ref(false)

    return {
      items,
      hover
    }
  }
}
</script>

<style>
.list-item {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.list-item:hover {
  background-color: #eee;
}
</style>