Question

vue 怎样实现hover效果

Answer 1

问题分析：

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。

举例如下：

以下案例将演示鼠标悬停在标签上，内容发生改变，而离开时内容再次发生改变。

HTML代码：

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

Vue代码：

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

页面初始化效果：

鼠标悬停在“默认值”3个字上的效果：

Answer 2

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。

hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。