vue 鼠标移动改变颜色

要实现Vue中鼠标移动改变颜色的效果，可以按照以下步骤进行操作：

1. 首先，在Vue实例的data中添加一个变量，用来保存当前鼠标所在元素的索引值。可以将其命名为`currentHoverIndex`。

2. 接下来，通过添加一个`@mouseover`事件监听器，在鼠标移动到某个元素上时，将当前鼠标所在元素的索引值赋值给`currentHoverIndex`。

3. 在模板中，为每个需要改变颜色的元素添加一个条件判断，如果当前元素的索引值等于`currentHoverIndex`，则添加一个`active`类名，这个类名在CSS中设置了红色的字体颜色。

下面是修改后的代码示例：

<div id="app">
  <ul>
    <li v-for="(item, index) in movies"
        :class="{ active: currentHoverIndex === index }"
        @mouseover="changeHoverIndex(index)">
      {{ item }}
    </li>
  </ul>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      movies:['海王', '黑猫警长', '海尔兄弟', '火影忍者', '进击的巨人'],
      currentHoverIndex: -1 // 初始化为-1，表示没有元素被鼠标移动到
    },
    methods: {
      changeHoverIndex(index) {
        this.currentHoverIndex = index;
      }
    }
  });
</script>

在上述代码中，我们使用了`mouseover`事件，当鼠标移动到某个元素上时，会触发`changeHoverIndex`方法，将当前元素的索引值传递给该方法，并更新`currentHoverIndex`的值。然后，在模板中根据`currentHoverIndex`与当前元素的索引值是否相等来判断是否添加`active`类名，从而改变颜色。

这样，当鼠标移动到某个元素上时，该元素的文本颜色就会变为红色。