Vue实现背景更换颜色

最新推荐文章于 2024-05-22 13:34:51 发布
最新推荐文章于 2024-05-22 13:34: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实现更换背景图片_Vue实现背景更换颜色操作
weixin_34617955的博客
12-24 1913
如下所示：.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;}上一页{{n}}下一页...
vue+element 主题背景颜色更换
05-06
本示例"vue+element 主题背景颜色更换demo"将引导你了解如何实现这一功能。 首先，理解Element UI的主题定制机制。Element UI使用Less作为预处理器，它的主题是基于Less变量进行控制的。在`element-ui/lib/theme-...
Vue实现背景更换颜色操作
10-15
主要介绍了Vue实现背景更换颜色操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
初试 vue2.0——4.项目开发_背景图片与底色的设置
dinan9786的博客
03-03 512
写在前面的话： 　　在实际应用中，我们常常遇到背景图片与颜色叠加效果的设计图，如以下效果的： 　　 这个我试过： 　　background：URL(); 　　background-color: rgba( ); 只要 color 写在后面是可以实现的： <!DOCTYPE html> <html lang="en"> <head>...
vue-主题切换(改变背景颜色、字体颜色等)
最新发布
qq_40187274的博客
05-22 245
2.在文件中使用，先引入混入，在页面开头绑定属性cssVars，css中var引用变量。1.创建cssmixin文件，里面存有混入的内容。
Vue里实现菜单栏选中字体颜色改变效果
weixin_67318211的博客
07-11 3378
大致意思是我们通过循环遍历，得到菜单栏，在li上绑定一个点击事件，传入index参数。在methods里，我们将index赋值给我们所定义的变量currentIndex，然后在a标签上动态添加类名，运用:class来动态添加类名active（active已在style中写好样式），这样就能愉快的切换菜单改变字体样式了 效果：1657551641187...
vue-绑定class实现动态切换按钮背景颜色
dianziagen的博客
12-05 1万+
动态的绑定class &lt;template&gt; &lt;div class="pay"&gt; &lt;div class="pay-container" v-for="(list,index) in payconfigEntities" v-bind:class="{colorChange:index==dynamic}" dir
关于在Vue中实现动态背景组件
12-22
在实现动态背景组件时，我们需要一个数据属性来存储背景图片的URL或颜色值。例如，我们可以在Vue实例的`data`选项中定义： ```javascript new Vue({ data() { return { background: '...
vue实现随机验证码功能(完整代码)
10-15
// 其他配置属性，如字体大小、背景颜色等 } } ``` 这个组件接收`identifyCode`作为属性，用于绘制在canvas上。其他属性如字体大小、背景色等用于自定义验证码的视觉效果。 总结来说，通过Vue.js实现随机验证码...
VUE问题记录（九）：点击事件改变背景颜色
Fiona_lms的博客
01-14 1万+
想要实现的效果如下： 代码实现如下： &lt;el-col :span="12" class="text-l"&gt; &lt;div class="jieogu-common" :class="{jiegou:changeActive == 0}" @click="changeStatus(0,0)" style="margin-left: 7
如何在 vue.js 中实现鼠标 hover（悬停）改变 background-color
热门推荐
金华松软的我
12-05 3万+
vue.js 事件处理 用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 代码如下： &amp;lt;div id=&quot;demo&quot;&amp;gt; &amp;lt;div @mouseover=&quot;mouseOver&quot; @mouseleave=&quot;mouseLeave&quot; :style=&am
vue之修改单页面背景颜色
sxjit的博客
03-28 2859
vue的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生操控各自的body节点，因为所有的页面都拥有同一个body。这就难受了，如果希望设置单个页面的背景颜色而又不影响其他页面，那怎么办？ beforeCreate() { document.querySelector('body').setAttribute('style','background-color:rgb(245,24...
vue工程：使用vue-particles实现动态粒子效果且只作为背景显示（包括样式设置）
happy81997的博客
12-26 6018
目录 一、综述 二、实现过程 2.1 安装vue-particles 2.2 全局配置vue-particles 2.3 使用 vue-particles 三、具体参数说明 四、样式调整，实现只作为背景 4.1、根据id号调整样式 4.2 根据自定义的class名称lizi设置样式 一、综述 为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使...
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
xwyjw的博客
04-12 3081
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片 首先要想获取多条数据要用到v-for循环，写到循环就必须写:key 话不多说上代码 重点就是:style="{background:item.color}" 注意这里要用一个大括号 然后还有就是动态获取图片 重点是:src=“item.img” 这里不加大括号 目前还是获取不到图片 两一个重点是此时怎们在咱们的路径前加require 此时才能获取到咱们的图片 另一个就是咱们想动态去改变咱们的字体颜色和改变背景思路一样 直接上代码 此时就
vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因
王阿储的博客
03-17 2万+
本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自...
vue 生成随机颜色 列表中 随机背景色
c_qianxia5040的博客
04-08 2752
1、不指定颜色，通过rgb赋值 <el-row :gutter="20"> <el-col :sm="12" :md="8" :lg="4" :xl="4" :xxl="4" v-for="(item,i) in 13" :key="i"> <div :style="randomRgb()" class="acess_item">{{ item }}</div> </el-col> </el-row&
Vue 获取RGB值动态改变div背景色，实现RGB颜色预览
qq_46053369的博客
07-08 2495
动态改变div背景色
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、付费专栏及课程。

余额充值