6. Vue Hover实现

最新推荐文章于 2024-08-16 10:24:31 发布

白怀宇

最新推荐文章于 2024-08-16 10:24:31 发布

阅读量564

点赞数 1

分类专栏： Vue2 经验总结文章标签： vue

本文链接：https://blog.csdn.net/b342216980/article/details/106939456

版权

Vue2 经验总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    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>
 

                