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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
最全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
php5.2时间相差8小时
2007/01/15 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
使用python实现省市三级菜单效果
2016/01/20 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python内存管理机制原理详解
2019/08/12 Python
Python获取时间戳代码实例
2019/09/24 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python新手学习函数默认参数设置
2020/06/03 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
关于环保的演讲稿
2014/05/10 职场文书
食品安全汇报材料
2014/08/18 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
在校生证明
2015/06/17 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL