Rumah hujung hadapan web View.js Bagaimana untuk menukar warna latar belakang dalam vuejs

Bagaimana untuk menukar warna latar belakang dalam vuejs

Sep 20, 2021 pm 03:14 PM
vuejs

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?'active':''">{{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:'#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>
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('已更新数据');
     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('body').setAttribute('style', 'margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;');
}
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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Beberapa petua untuk membangunkan aplikasi Android menggunakan bahasa Vue.js dan Kotlin Beberapa petua untuk membangunkan aplikasi Android menggunakan bahasa Vue.js dan Kotlin Jul 31, 2023 pm 02:17 PM

Beberapa petua untuk membangunkan aplikasi Android menggunakan bahasa Vue.js dan Kotlin

Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python Jul 31, 2023 pm 07:53 PM

Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python

Mengintegrasikan Vue.js dengan Objektif-C, petua dan nasihat untuk membangunkan apl Mac yang boleh dipercayai Mengintegrasikan Vue.js dengan Objektif-C, petua dan nasihat untuk membangunkan apl Mac yang boleh dipercayai Jul 30, 2023 pm 03:01 PM

Mengintegrasikan Vue.js dengan Objektif-C, petua dan nasihat untuk membangunkan apl Mac yang boleh dipercayai

Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta Aug 27, 2023 am 11:51 AM

Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta

Bangunkan perangkak web dan alat pengikis data yang cekap menggunakan bahasa Vue.js dan Perl Bangunkan perangkak web dan alat pengikis data yang cekap menggunakan bahasa Vue.js dan Perl Jul 31, 2023 pm 06:43 PM

Bangunkan perangkak web dan alat pengikis data yang cekap menggunakan bahasa Vue.js dan Perl

Penyepaduan bahasa Vue.js dan Lua, amalan terbaik dan perkongsian pengalaman dalam membina enjin bahagian hadapan untuk pembangunan permainan Penyepaduan bahasa Vue.js dan Lua, amalan terbaik dan perkongsian pengalaman dalam membina enjin bahagian hadapan untuk pembangunan permainan Aug 01, 2023 pm 08:14 PM

Penyepaduan bahasa Vue.js dan Lua, amalan terbaik dan perkongsian pengalaman dalam membina enjin bahagian hadapan untuk pembangunan permainan

Panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript Panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript Jul 30, 2023 pm 03:18 PM

Panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript

Langkah dan pengalaman praktikal tentang cara menggunakan Vue.js dan Java untuk membangunkan analisis data besar dan penyelesaian pemprosesan Langkah dan pengalaman praktikal tentang cara menggunakan Vue.js dan Java untuk membangunkan analisis data besar dan penyelesaian pemprosesan Jul 30, 2023 pm 09:01 PM

Langkah dan pengalaman praktikal tentang cara menggunakan Vue.js dan Java untuk membangunkan analisis data besar dan penyelesaian pemprosesan

See all articles