Vue Hover 实现
-
使用Vue代码动态实现CSS中的
hover
属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Hover实现</title> <style> #box { width: 100px; height: 100px; } </style> </head> <body> <div id="app"> <div id="box" @mouseover="mouseover" @mouseleave="mouseleave" :style="style" > </div> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> app = new Vue({ el: '#app', data: { color: 'blue', hoverColor: 'green', isMouseover: false }, computed: { style: function() { let data = {} if(this.isMouseover) { data['background-color'] = this.color }else{ data['background-color'] = this.hoverColor } return data } }, methods: { mouseover() { this.isMouseover = true }, mouseleave() { this.isMouseover = false } } }) </script> </body> </html>