Jquery到Vue js需要遍历子节点

Question

我需要帮助将 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。谢谢

Answer 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
  }
}

Jquery到Vue js需要遍历子节点

Jquery to Vue js need traversing child nodes

vue.js

vue-component

vuejs2