How vue.js implements the move-in and move-out effect

Vue.js method to implement the move-in and move-out effect: [methods:{enter(index){this.seen = true;this.current = index;},leave(){this.seen = false;this .cur...].

The operating environment of this article: windows10 system, vue 2.5.2, thinkpad t480 computer.

vue.js specific code to implement move-in and move-out events:

html code:

<i class="icon" @mouseenter="enter(index)" @mouseleave="leave()"></i>

Logic code:

methods:{
      enter(index){
        this.seen = true;
        this.current = index;
      },
      leave(){
        this.seen = false;
        this.current = null;
      }
    }

Recommended learning: php Training

The above is the detailed content of How vue.js implements the move-in and move-out effect. For more information, please follow other related articles on the PHP Chinese website!