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