Bagaimana untuk menukar warna latar belakang dalam vuejs-View.js-php.cn

Bagaimana untuk menukar warna latar belakang dalam vuejs

藏色散人

Lepaskan： 2023-01-13 00:45:38

asal

4927 orang telah melayarinya

Cara mengubah suai warna latar belakang vuejs: 1. Memperkenalkan gaya css biasa dalam index.html 2. Ubah suai warna latar belakang satu komponen dengan menambah kod "beforeCreate () {...}" .

Bagaimana untuk menukar warna latar belakang dalam vuejs

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.5.17, komputer Dell G3.

Bagaimana untuk menukar warna latar belakang dalam vuejs?

Vue melaksanakan operasi perubahan warna latar belakang

seperti berikut:

<!-- 分页上下页改变背景图效果 -->
<!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;
		}
		p{
			width: 500px;height: 500px;
		}
	</style>
</head>
<body >
	<p 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?&#39;active&#39;:&#39;&#39;">{{n}}</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="increase">下一页</a> 
			</li>
		</ul>
	</p>
	<script type="text/javascript">
		var exampleData={
			
			//msg:"Hello Vue",
			bgCol:"#DB8623FF",
			totalPage:10,
			
			activeNum:3,
		}
		var app = new Vue({
			el:&#39;#app&#39;,
			data:exampleData,
			methods:{
				decrease:function(){
					this.activeNum==1?&#39;&#39;:this.activeNum-=1;
					
					this.bgCol=this.getRandom();

				},
				increase:function(){
					this.activeNum==10?&#39;&#39;: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>

Salin selepas log masuk

<!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>
 <p id="app" v-change-background-color="myBgColor">
 <h3 >
 <input type="text" v-model="myBgColor" placeholder="请输入16进制颜色">
 </h3>
 </p>
 <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(&#39;已更新数据&#39;);
     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>

Salin selepas log masuk

Pengetahuan tambahan: vue menetapkan warna latar belakang secara seragam dan menukar warna latar belakang halaman tertentu secara individu

Kadangkala kami akan Apabila menghadapi masalah menukar warna isian latar belakang komponen secara individu, kami telah memperkenalkan gaya css biasa dalam index.html (warna latar belakang ditetapkan dalam badan kerana satu komponen tidak mempunyai tag badan,). kita perlu mengubah suai warna latar belakang satu komponen Hanya tambah kod berikut.

beforeCreate () {
 document.querySelector(&#39;body&#39;).setAttribute(&#39;style&#39;, &#39;margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;&#39;);
}

Salin selepas log masuk

Pembelajaran yang disyorkan: "tutorial vue"

Atas ialah kandungan terperinci Bagaimana untuk menukar warna latar belakang dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!