Vue实现背景更换颜色操作


Posted in Javascript onJuly 17, 2020

如下所示:

Vue实现背景更换颜色操作

<!-- 分页上下页改变背景图效果 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
	<style type="text/css" media="screen">
		.page{
			list-style: none;
		}
		.page>li{
			float: left;
			margin-left: 10px;
		}
		.page>li>a{
			text-decoration: none;
		}
		.active{
			color: red;
			text-decoration: display;
		}
		div{
			width: 500px;height: 500px;
		}
	</style>
</head>
<body >
	<div id="app" v-bind:style="{backgroundColor:bgCol}">
		<ul class="page">
			<li> 
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="decrease" >上一页</a> 
			</li>
			<li v-for="n in totalPage">
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-bind:class="n==activeNum?'active':''">{{n}}</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="increase">下一页</a> 
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		var exampleData={
			
			//msg:"Hello Vue",
			bgCol:"#DB8623FF",
			totalPage:10,
			
			activeNum:3,
		}
		var app = new Vue({
			el:'#app',
			data:exampleData,
			methods:{
				decrease:function(){
					this.activeNum==1?'':this.activeNum-=1;
					
					this.bgCol=this.getRandom();

				},
				increase:function(){
					this.activeNum==10?'':this.activeNum+=1;
					this.bgCol=this.getRandom();
				},
				getRandom:function(){
					var r=Math.floor(Math.random()*256);
					var g=Math.floor(Math.random()*256);
					var b=Math.floor(Math.random()*256);
					var a=Math.random().toFixed(1);
					return `rgba(${r},${g},${b},${a})`
				}
			}
		})
	</script>
</body>
</html>

Vue实现背景更换颜色操作

<!DOCTYPE html>
<html>

<head lang="en">
 <meta charset="UTF-8">
 <title>自定义指令实现随机背景</title>
 <style type="text/css" media="screen">
  #app{
  width: 999px;
  height: 999px;
  }
 </style>
</head>
<body>
 <h3>自定义指令</h3>
 <div id="app" v-change-background-color="myBgColor">
 <h3 >
 <input type="text" v-model="myBgColor" placeholder="请输入16进制颜色">
 </h3>
 </div>
 <script src="../node_modules//vue/dist/vue.js"></script>
 <script>
 var exampleData = {
  myBgColor: "#5FCA34",
 };
 new Vue({
  el: "#app",
  data: exampleData,
  methods:{
  	 getRandom:function(){
			var r=Math.floor(Math.random()*256);
			var g=Math.floor(Math.random()*256);
			var b=Math.floor(Math.random()*256);
			var a=Math.random().toFixed(1);
			return `rgba(${r},${g},${b},${b})`
    }
  },
  directives: {
   changeBackgroundColor: {
    bind: function(el, bindings) {
     //el:指定绑定dom元素 h3dom对象
     //bindings:自定义指令对象
     //v-change-background-color="myBgColor"
     //bindings.value;=="#ff0000"
					var r=Math.floor(Math.random()*256);
					var g=Math.floor(Math.random()*256);
					var b=Math.floor(Math.random()*256);
					var a=Math.random().toFixed(1);

     el.style.backgroundColor =`rgba(${r},${g},${b},${a})`;
     console.log("绑定成功");
    },
    update: function(el, bindings) {
     console.log('已更新数据');
     var r=Math.floor(Math.random()*256);
					var g=Math.floor(Math.random()*256);
					var b=Math.floor(Math.random()*256);
					var a=Math.random().toFixed(1);
     el.style.background = `rgba(${r},${g},${b},${a})`
    }, //更新数据

   }
  }
 });
 </script>
</body>

</html>

补充知识:vue统一设置了背景色,单独改变某一页的背景色

有时我们会遇到单独改变某个组件的背景填充色,而我们已经在index.html中引入了公用的css样式(body中设置了背景色),由于单个组件没有body标签,于是要修改单个组件的背景色只需添加如下代码即可。

beforeCreate () {
 document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;');
}

以上这篇Vue实现背景更换颜色操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
vue插件实现v-model功能
Sep 10 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 #Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 #Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 #Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 #Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 #Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 #Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
You might like
神族 Protoss 剧情介绍
2020/03/14 星际争霸
用PHP书写安全的脚本代码
2012/02/05 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
javascript 写类方式之十
2009/07/05 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
vue-axios使用详解
2017/05/10 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Django 连接sql server数据库的方法
2018/06/30 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python+tkinter实现学生管理系统
2019/08/20 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
如何用PHP实现邮件发送
2012/12/26 面试题
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
后勤工作个人总结
2015/02/28 职场文书
辅导员学期工作总结
2015/08/14 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python