前端 Vue-hover实现水波纹效果

前言

android有一种点击效果 就是点击的时候背景色出现水波纹的效果
前端ui也设计了一种，鼠标移动到响应的条目位置 就显示一个浅色背景 表示光标的位置

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

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

var vm = new Vue({el: '#test',data: {message: '测试'},methods: {enter: function(e){console.log(e);this.message = '点击了';},leave: function(e){this.message = '离开了';}}
});

图例