如何将jQuery转换为方法：VueJS中的函数

Question

我需要知道如何使这个功能在VueJS中作为一种方法...

$(document).ready(function(){

    $(".slide").hover(function(){
        $(this).find("div.snipit").slideDown("slow");
    },function(){
        $(this).find("div.snipit").slideUp("slow");    
    });   
});                   

http://jsfiddle.net/NuWna/2/

Answer 1

使用DOM api并在mounted方法中添加侦听器。

基于jsfiddle提供的@RecardoPoole（link），我做了以下更改：

• 使用visibility代替display
• 使用height 3s, visibility 3s
完成转换
• 对于div内div的{​​{1}}，slide，div，snipit，我添加了CSS overflow: hidden，这是为了确保外部div在覆盖时会覆盖文本（link）

＆＃13;

＆＃13;

const app = new Vue({
    el: '#app',
    mounted() {    
        const originHeight = '125px';
        const slideEl = document.getElementsByClassName('slide')[0];
        const snipitEl = document.querySelector('div.snipit');
        
        snipitEl.style.transition = 'height 3s, visibility 3s';
        
        slideEl.addEventListener('mouseover', function() {
            // mouse is hovering over this element
            // slidedown
           snipitEl.style.height = originHeight;
            snipitEl.style.visibility = 'visible';
        });

       slideEl.addEventListener('mouseout', function() {
            // mouse was hovering over this element, but no longer is
            // slideup
           snipitEl.style.height = '0px';
           snipitEl.style.visibility = 'hidden';
        });
    }
});

＆＃13;

img{
    border:1px solid yellow;   
    margin: 14px 0 0 0;
}

div.slide {
    width: 310px;
    height: 230px;
    float: left;
    border:1px solid red;
    text-align: center;
    position: relative;
    background: url(http://dummyimage.com/310x230) no-repeat top center;

}

div.slide  div {
    overflow: hidden;
    width: 250px;
    height: 100px;
    padding: 0;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    border:1px solid red;
    bottom: 14px;
    left:30px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <div class="slide">
    <img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />

    <div class="snipit">
         <h4>Image 1</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
    </div>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;