vue循环出来的div div里面有删除按钮 鼠标移入移出改变其中一个按钮的背景颜色
时间: 2024-05-02 12:23:02 浏览: 99
您可以使用Vue的事件绑定和条件渲染来实现鼠标移入移出改变按钮背景颜色的效果。具体做法是:
1. 给删除按钮绑定mouseenter和mouseleave事件,分别触发对应的处理方法。
2. 在数据模型中添加一个属性用来表示当前鼠标是否在按钮上。
3. 在模板中使用v-bind:class指令来动态绑定按钮的class,根据鼠标是否在按钮上来决定是否添加特定的class来改变背景颜色。
示例代码如下:
```
<template>
<div v-for="(item, index) in list" :key="index">
<div>
{{item.text}}
<button class="delete-button"
@mouseenter="setButtonHover(true, index)"
@mouseleave="setButtonHover(false, index)"
@click="deleteItem(index)">
删除
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'},
],
buttonHover: [],
}
},
methods: {
setButtonHover(hover, index) {
this.$set(this.buttonHover, index, hover);
},
deleteItem(index) {
this.list.splice(index, 1);
this.$delete(this.buttonHover, index);
},
},
}
</script>
<style>
.delete-button:hover {
background-color: gray;
}
.delete-button.hover {
background-color: green;
}
</style>
```
在模板中使用v-bind:class来绑定按钮的class,根据buttonHover数组中的值来判断是否添加.hover类。用this.$set和this.$delete来更新数组中某个元素的值。使用的是Vue的响应式设置。注意删除元素时,也要删除按钮hover的状态。
阅读全文