Vue实现hover功能

<div id="app">
    <p @mouseenter="enter" @mouseleave="leave">{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: '默认值'
    },
    methods: {
        enter: function(e){
            console.log(e);
            this.message = '修改值';
        },
        leave: function(e){
            this.message = '默认值111';
        }
    }
});

用vue实现元素获得鼠标焦点的功能，这里有两个方法，@mouseenter 和 @mouseleave ，

@mouseenter 是值元素获得鼠标焦点后执行的方法，而@mouseleave 是当元素执行了 @mouseenter 离开之后执行的方法，两种都能获得元素DOM，从来用来修改元素的样式

转载于:https://www.cnblogs.com/qiuchuanji/p/8127453.html