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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
jQuery聚合函数实例
May 21 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
Vue Element plus使用方法梳理
Dec 24 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
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
类的核心特性有哪些
2014/01/01 面试题
毕业生教师求职信
2013/10/20 职场文书
个人综合鉴定材料
2014/05/23 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014年党务工作总结
2014/11/25 职场文书
大学生操行评语大全
2014/12/31 职场文书
学雷锋倡议书
2015/01/19 职场文书
中学教师个人总结
2015/02/10 职场文书
求职自我评价怎么写
2015/03/09 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Python 中random 库的详细使用
2021/06/03 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers