如何使用 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 事件来处理这个