vue循环出来的input input右边定位了div div里面有内容 鼠标移入移出改变div背景颜色

您可以通过给input添加一个事件监听器，当鼠标进入input区域时，改变其后面的div的背景颜色，当鼠标移出input区域时，再将其背景颜色恢复原状。以下是一个示例代码：

HTML部分：

<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <input type="text" @mouseover="changeBgColor(index, true)" @mouseout="changeBgColor(index, false)">
    <div :class="{ 'bg-color': showBg && showIndex === index }">
      {{ item }}
    </div>
  </div>
</div>

Vue部分：

new Vue({
  el: '#app',
  data: {
    items: ['item1', 'item2', 'item3'],  // 待循环的数据
    showBg: false,  // 是否显示背景颜色
    showIndex: null  // 当前鼠标所在的input的下标
  },
  methods: {
    // 改变背景颜色的方法，index表示当前input的下标，isShow表示是否显示背景颜色
    changeBgColor(index, isShow) {
      this.showBg = isShow;
      this.showIndex = index;
    }
  }
})

CSS部分：

.bg-color {
  background-color: #ccc;
}

在上面的示例代码中，我们通过遍历数据循环出多个input和对应的div，给input添加了两个事件监听器，当鼠标进入时，将showBg标记为true，并将showIndex赋值为当前input的下标；当鼠标移出时，将showBg标记为false，这样就可以在Vue中根据showBg和showIndex的值来决定是否显示div的背景颜色。同时我们还通过:class绑定了背景颜色样式，并在CSS中设置了该样式的背景颜色。

希望这个回答可以帮您解决问题，如果还有其他问题可以继续提问哦~