vue 鼠标指向、单击 li元素时需要动态添加类

你可以使用 Vue.js 的 v-bind:class 指令来动态绑定元素的类。具体方法如下：

1. 首先，在你的 Vue 实例的 data 中定义一个名为 "selected" 的变量，这个变量用来记录当前被选中的 li 元素的索引。

2. 然后，在你的 li 元素上使用 v-bind:class 指令，并将一个对象传递给它。这个对象的键名是你要绑定的类名，键值是一个布尔值，表示当前 li 元素是否应该被添加这个类。

3. 在你的 li 元素上绑定一个事件处理函数，当鼠标指向或单击 li 元素时调用这个函数。在函数中，将 "selected" 变量设置为当前 li 元素的索引。

这样，当鼠标指向或单击 li 元素时，就会根据 "selected" 变量的值来动态添加或删除类。

示例代码如下：

<template>
  <ul>
    <li v-for="(item, index) in items" v-bind:class="{ active: index === selected }" v-on:mouseover="selected = index" v-on:click="selected = index">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      items: ['item 1', 'item 2', 'item 3']
    }
  }
}
</script>