使用vue实现一个点击换色的指令

最新推荐文章于 2024-04-18 09:38:30 发布

guoxiaxing

最新推荐文章于 2024-04-18 09:38:30 发布

阅读量859

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 前端框架文章标签： vue自定义指令

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/97812954

Javascript 同时被 2 个专栏收录

66 篇文章

订阅专栏

前端框架

23 篇文章

订阅专栏

本文介绍了一个Vue自定义指令的实现方法，该指令可以使页面元素在被点击时随机更换背景颜色。通过使用JavaScript的Math.random()函数生成随机数，并将其转化为RGB颜色值，从而达到动态改变元素颜色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<div v-random-color style='width:100px;height:100px;background-color:red;position:absolute;'></div>

script代码：

// vue自定义指令，点击可以让元素随机换色
Vue.directive('randomColor', function(){
	this.el.onclick = function(){
		this.style.backgroundColor = 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) +')';
	}
});