Vue中有時候需要在hover時刪除元素，我們可以利用Vue提供的指令來實現這個功能，下面是一個簡單的示例：

<template>
<div>
<ul>
<li v-for="item in items" v-bind:key="item.id" v-on:mouseenter="hoverItem(item.id)" v-on:mouseleave="cancelHover">
{{ item.name }}<i v-if="item.hovered" v-on:click="deleteItem(item.id)" class="hover-delete-icon">x</i>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
name: "Item 1",
hovered: false
},
{
id: 2,
name: "Item 2",
hovered: false
},
{
id: 3,
name: "Item 3",
hovered: false
}
],
hoveredItemId: null
};
},
methods: {
hoverItem(id) {
this.hoveredItemId = id;
this.items.forEach(item =>{
if (item.id === id) {
item.hovered = true;
}
});
},
cancelHover() {
this.hoveredItemId = null;
this.items.forEach(item =>{
item.hovered = false;
});
},
deleteItem(id) {
const index = this.items.findIndex(item =>item.id === id);
this.items.splice(index, 1);
}
}
};
</script>

在這個示例代碼中，我們綁定了mouseenter和mouseleave事件來監聽鼠標是否hover在元素上，同時使用v-if指令來判斷元素是否被hover。當元素被hover時，我們通過hoverItem方法將對應元素的id保存到hoveredItemId中，并將對應元素的hovered屬性設置為true，此時X按鈕會顯示出來；當鼠標離開元素時，我們將hoveredItemId重置為null，同時將所有元素的hovered屬性設置為false，隱藏所有的X按鈕。當點擊X按鈕時，我們通過deleteItem方法從數組中移除對應的元素。