Vue实现背景更换颜色

最新推荐文章于 2024-04-29 17:00:51 发布
最新推荐文章于 2024-04-29 17:00:51 发布
阅读量1.1w 收藏
点赞数 1
分类专栏： JS程序 文章标签： Vue JS CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FreMePst/article/details/84501801
版权

在这里插入图片描述

<!-- 分页上下页改变背景图效果 -->
<!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="#" v-on:click="decrease" >上一页</a> 
			</li>
			<li v-for="n in totalPage">
				<a href="#" v-bind:class="n==activeNum?'active':''">{{n}}</a>
			</li>
			<li>
				<a href="#" @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>

在这里插入图片描述

<!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>
ShanCW
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现背景更换颜色操作
10-15
主要介绍了Vue实现背景更换颜色操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
初试 vue2.0——4.项目开发_背景图片与底色的设置
dinan9786的博客
03-03 516
写在前面的话： 　　在实际应用中，我们常常遇到背景图片与颜色叠加效果的设计图，如以下效果的： 　　 这个我试过： 　　background：URL(); 　　background-color: rgba( ); 只要 color 写在后面是可以实现的： <!DOCTYPE html> <html lang="en"> <head>...
Vue进阶（幺柒伍）：前端用户体验提升（六）色彩搭配_前端颜色搭配
最新发布
2401_84411557的博客
04-29 571
下面是在做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。类似色相的配色，能表现共同的配色印象。与同一色相的配色一样，类似色相的配色容易产生单调的感觉，所以可使用对比色调的配色手法。与同一色相的配色一样，类似色相的配色容易产生单调的感觉，所以可使用对比色调的配色手法。以色相为基础的配色是以色相环为基础进行思考的，用色相环上类似的颜色进行配色，可以得到稳定而统一的感觉。
Vue里实现菜单栏选中字体颜色改变效果
weixin_67318211的博客
07-11 3386
大致意思是我们通过循环遍历，得到菜单栏，在li上绑定一个点击事件，传入index参数。在methods里，我们将index赋值给我们所定义的变量currentIndex，然后在a标签上动态添加类名，运用:class来动态添加类名active（active已在style中写好样式），这样就能愉快的切换菜单改变字体样式了 效果：1657551641187...
Vue进阶（幺柒伍）：前端用户体验提升（六）色彩搭配
IT全栈 华强工作室
03-14 3235
Vue进阶（幺柒伍）：前端用户体验提升（六）色彩搭配
CSS Vue 切换背景颜色
ChauncyWu的博客
05-18 3041
原文演示及链接：https://codepen.io/richardtallent/pen/yvpERW/ <template> <div class="theme" :style="bgProps"> <div class="btn"> <input type="color" v-...
vue+element 主题背景颜色更换
05-06
本示例"vue+element 主题背景颜色更换demo"将引导你了解如何实现这一功能。 首先，理解Element UI的主题定制机制。Element UI使用Less作为预处理器，它的主题是基于Less变量进行控制的。在`element-ui/lib/theme-...
关于在Vue中实现动态背景组件
12-22
在实现动态背景组件时，我们需要一个数据属性来存储背景图片的URL或颜色值。例如，我们可以在Vue实例的`data`选项中定义： ```javascript new Vue({ data() { return { background: '...
vue实现随机验证码功能(完整代码)
10-15
// 其他配置属性，如字体大小、背景颜色等 } } ``` 这个组件接收`identifyCode`作为属性，用于绘制在canvas上。其他属性如字体大小、背景色等用于自定义验证码的视觉效果。 总结来说，通过Vue.js实现随机验证码...
vue单页面背景颜色设置
baidu_41601299的博客
10-30 9072
有时我们会遇到单独改变某个组件的背景填充色，而我们已经在index.html中引入了公用的css样式（body中设置了背景色），由于单个组件没有body标签，于是要修改单个组件的背景色只需添加如下代码即可。 beforeCreate () { document.querySelector(‘body’).setAttribute(‘style’, ‘margin: 0 auto; width: 1...
Vue卡列表中不同卡片显示不同背景颜色
wde_rensheng的博客
05-22 7540
Vue卡列表中不同卡片显示不同背景颜色 最近做一个项目的移动端页面，需要完成一个卡列表，不同银行显示不同颜色的问题，一开始考虑过通过识别银行图标色调生成，但最后为了考虑开发成本，只做几种通用的色调。 具体就是用v-for命令遍历，代码 <div class='cardlist' v-for="i in item" :key='index' :class='obj[i.bank]'>&l...
vue引入Swiper，背景颜色与轮播图片一致，更改前进后退按钮以及分页器样式，
document_write的博客
08-12 2152
一. 安装swiper(我的swiper版本是"^4.5.0",) npm install swiper --save 二.局部引入 import Swiper from “swiper”; import ‘swiper/dist/css/swiper.min.css’; 三.具体代码如下 <template> <div class="content" ref="bgColo...
vue中给页面添加背景色
weixin_49696014的博客
12-30 3338
vue中给页面添加背景色 1、如果每一个组件都添加，并且背景色一样，就在全局样式文件里设置html，body就可以 2、如果是单独给一个组件设置背景色，用如下代码： // 在创建之前，添加body的style属性， 给花名册组件单独设置背景色 beforeCreate() { document.querySelector('body').setAttribute('style', 'background:#F5F6FA') }, // 在销毁前，将body的style属性删除 bef
vue 页面设置背景色
热门推荐
weixin_44805839的博客
09-15 2万+
全部页面设置背景色： 在app.vue的style标签中： page{ background-color: #161622; } 单独页面设置： 在页面中进行如上设置
vue框架中更改body，html页面背景颜色
toplatona
09-06 1万+
beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.querySelector('body').removeAttribute('style') }
VUE—v-for循环动态添加背景颜色
Poppy_LYT的博客
08-07 9022
VUE—v-for循环动态添加背景颜色 v-for循环： data：
Vue 全局组件-卡片型盒子组件
pinkling的博客
05-31 8907
首先上效果图 表单外部类似卡片的圆角矩形即本卡片型盒子组件 在所有vue页面中可直接使用,无需再单独进行引入 组件编写 <template> <div class="basic-box"> <el-card> <slot></slot> </el-card> &lt...
uni app vue 设置页面背景色
wusejiege6的博客
10-21 1603
vue页面设置页面背景色，总是无法充满页面高度 最关键代码一句，min-height: 100%; page { width: 100%; background-color: #f6f6f6; min-height: 100%; }
vue如何动态改变颜色
北堂飘霜_记录
08-19 3727
场景 昨天做了一个查询的,有时候查不到东西,确实可以以弹框的形式告知用户,但是弹框会使用户不能够进行其他操作.有时候会出现卡死的局面,可以以文字的形式告知,正常结果为正常颜色,查不到或者查询出现错误就会是红色. 方案 例如: <input v-model='xxx' :style="{'color':cerrorColor}"> 写一个 computed: { cerrorColor () { if("xxx" === "xxx"){ return 'red' } else {
vue echarts背景色颜色渐变
08-22
要给Vue Echarts的背景色设置颜色渐变，可以通过以下步骤实现： 1. 首先，确保你已经在Vue项目中正确安装了Echarts依赖，可以使用npm或yarn进行安装。 2. 在需要使用Echarts的组件中，引入Echarts的库文件，例如：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值