jquery转vue js需要遍历子节点

Posted 2023-02-22

【中文标题】jquery转vue js需要遍历子节点

【英文标题】：Jquery to Vue js need traversing child nodes

【发布时间】：2021-06-24 08:28:56

【问题描述】：

我需要帮助将 jQuery 代码转换为 Vue js

                 <div class="single-why" v-for="(single, index) in data" :key="index">
                    <div class="content">                            
                        <h5 class="mt-3">100% Certified </h5>
                    </div>
                    <div class="hover-content" style="display:none">
                        <h5>100% Certified Jewellery</h5>                               
                    </div>
                </div>

这里我需要：当悬停在 .single-why 上时，需要显示 .hover-content 和 jQuery 一样

      $('.single-why').on('hover', function ()
            $(this).children('.hover-content').show()
        )

请建议我使用 vue。 谢谢

【问题讨论】：

这有帮助吗？ ***.com/questions/30911933/mouseover-or-hover-vue-js

它适用于单个元素.. 对于多个元素不起作用。我的 div 在循环中..

【参考方案1】：

您使用@mouseover 和@mouseleave 事件。在循环中，您必须考虑元素索引，因此不要使用布尔值来显示悬停的元素，而是使用它的索引。

 <div 
   class="single-why" 
   v-for="(single, index) in data" 
   :key="index" 
   @mouseover="hoverIndex = index"
   @mouseleave="hoverIndex = null"
 >
   <div class="content">                            
     <h5 class="mt-3">100% Certified </h5>
   </div>
   <div class="hover-content" v-show="hoverIndex === index">
     <h5>100% Certified Jewellery</h5>                               
   </div>
 </div>

data()
  return 
      hoverIndex: null
  

【讨论】：

非常感谢它完美运行。我是 vue 的新手，你帮了我很多。再次感谢