如何使用 Vue.js 更改鼠標 hover 上單個列表對象的 html 內容（Font-Awesome Icon）

Question

我的目標是為鼠標 hover 上的 Vue 顯示的列表項更改一個很棒的字體圖標。 基本上，我想用 Vue.js 重新創建這個功能。

我知道使用 css 和 js 有很多方法可以做到這一點，甚至在上面的鏈接中包括了如何使用純 css 做到這一點，但我很好奇我是否可以單獨使用 vue 做到這一點。

這是生成顯示數據列表的代碼：

<div id="file-content" class="hover file-row-container fr-open-dir"
     v-on:click="SetSelected(dirObj.id)"
     v-for="dirObj in displayedFolders">
    <div class="file-row">
        <div class="file-row-icon">
            <i class="fa fa-folder-o" aria-hidden="true"></i>
        </div>
        <span class="file-row-text hover-ul">
            {{dirObj.name}}
        </span>
    </div>
</div>

Answer 1

css是這里的最佳選擇。 是的，你可以，但我不推薦。 因為它不適合您的操作。 你可以使用@mouseover 和@mouseleave 事件來處理這個