如何使用 Vue.js 在鼠标悬停时更改单个列表对象的 html 内容

Question

我的目标是为在鼠标悬停时使用 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 事件来处理这个