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 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 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
域名和cookie问题(域名后缀)
2012/10/10 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP微商城开源代码实例
2019/03/27 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jQuery事件详解
2017/02/23 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
对python sklearn one-hot编码详解
2018/07/10 Python
实例介绍Python中整型
2019/02/11 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
小学生手册家长评语
2014/04/16 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
办公室文员岗位职责
2015/02/04 职场文书
遗愿清单观后感
2015/06/09 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫