vue循环出来的 鼠标移入移出改变其中一个背景颜色
时间: 2024-05-03 19:20:22 浏览: 118
在Vue 中实现循环渲染多个相同echarts图表
您好,关于您的问题,可以使用Vue的指令v-bind:class和v-on:mouseover/v-on:mouseout绑定class和鼠标事件。具体代码如下:
```html
<div v-for="(item, index) in items"
v-bind:key="index"
v-bind:class="{ 'highlight': item.highlight }"
v-on:mouseover="item.highlight = true"
v-on:mouseout="item.highlight = false">
{{ item.text }}
</div>
```
其中,items为渲染数组,highlight为每个元素是否高亮的标志位。当鼠标移入元素时,对应元素的highlight会被设置为true,从而触发v-bind:class中的class绑定;当鼠标移出元素时,对应元素的highlight会被设置为false,从而解除highlight对应的class绑定。
希望这能够帮助您解决问题。如有疑问,请随时向我提问。
阅读全文