vuejs怎麼修改背景色-Vue.js-PHP中文網

首頁

web前端

Vue.js

vuejs怎麼修改背景色

藏色散人

Sep 20, 2021 pm 03:14 PM

vuejs

vuejs修改背景色的方法：1、在index.html中引入公用的css樣式；2、透過新增「beforeCreate () {...}」程式碼修改單一元件的背景色即可。

vuejs怎麼修改背景色

本文操作環境：windows7系統、vue2.5.17版、Dell G3電腦。

vuejs怎麼修改背景色？

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;
		}
		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>

登入後複製

<!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>

登入後複製

補充知識：vue統一設定了背景色，單獨改變某一頁的背景色

有時我們會遇到單獨改變某個元件的背景填滿色，而我們已經在index.html中引入了公用的css樣式（body中設定了背景色），由於單一元件沒有body標籤，所以要修改單一元件的背景色只需添加如下代碼即可。

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;);
}

登入後複製

推薦學習：《

vue教學》

以上是vuejs怎麼修改背景色的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1666

CakePHP 教程

1426

Laravel 教程

1328

PHP教程

1273

C# 教程

1253

Related knowledge

使用Vue.js和Kotlin語言開發安卓應用程式的一些技巧 Jul 31, 2023 pm 02:17 PM

使用Vue.js和Kotlin語言開發安卓應用程式的一些技巧隨著行動應用的普及和用戶需求的不斷增長，安卓應用的開發越來越受到開發者的關注。在開發安卓應用程式時，選擇合適的技術堆疊至關重要。近年來，Vue.js和Kotlin語言逐漸成為安卓應用程式開發的熱門選擇。本文將介紹使用Vue.js和Kotlin語言開發安卓應用程式的一些技巧，並給出對應的程式碼範例。一、搭建開發環境在開始

使用Vue.js和Python開發資料視覺化應用的一些技巧 Jul 31, 2023 pm 07:53 PM

使用Vue.js和Python開發資料視覺化應用的一些技巧引言：隨著大數據時代的到來，資料視覺化成為了一個重要的解決方案。而在資料視覺化應用的開發中，Vue.js和Python的組合能夠提供靈活性和強大的功能。本文將分享一些使用Vue.js和Python開發資料視覺化應用的技巧，並附上對應的程式碼範例。一、Vue.js簡介Vue.js是一款輕量級的JavaSc

如何使用Vue實現仿QQ聊天氣泡特效 Sep 20, 2023 pm 02:27 PM

如何使用Vue實現仿QQ聊天氣泡特效在現今的社交時代，聊天功能已成為了手機應用程式和網頁應用程式的核心功能之一。而聊天介面中最常見的元素之一就是聊天氣泡，它可以清楚地將發送者和接收者的訊息區分開來，有效地提高了訊息的可讀性。本文將介紹如何使用Vue實現仿QQ聊天氣泡特效，以及提供具體的程式碼範例。首先，我們需要建立一個Vue元件來表示聊天氣泡。組件包含兩個主要部分

Vue.js與Lua語言的融合，建構遊戲開發的前端引擎的最佳實踐和經驗分享 Aug 01, 2023 pm 08:14 PM

Vue.js與Lua語言的融合，建構遊戲開發的前端引擎的最佳實踐和經驗分享引言：隨著遊戲開發的不斷發展，遊戲前端引擎的選擇成為了一個重要的決策。在這些選擇中，Vue.js框架和Lua語言都成為了眾多開發者的關注點。 Vue.js作為一款受歡迎的前端框架具有豐富的生態系統和便捷的開發方式，而Lua語言則因其輕量級和高效性能在遊戲開發中得到廣泛應用。本文將探討如何將

如何使用PHP和Vue.js實現圖表上的資料篩選和排序功能 Aug 27, 2023 am 11:51 AM

如何使用PHP和Vue.js實現圖表上的資料篩選和排序功能在網頁開發中，圖表是一種非常常見的資料展示方式。使用PHP和Vue.js可以輕鬆實現圖表上的資料篩選和排序功能，使用戶能夠自訂查看圖表上的數據，提高資料的視覺化效果和使用者體驗。首先，我們需要準備一組資料供圖表使用。假設我們有一個資料表格，包含姓名、年齡和成績三列，資料如下：姓名年齡成績張三1890李

Vue.js與Objective-C語言的集成，開發可靠的Mac應用的技巧和建議 Jul 30, 2023 pm 03:01 PM

Vue.js與Objective-C語言的集成，開發可靠的Mac應用的技巧和建議近年來，隨著Vue.js在前端開發中的普及和Objective-C在Mac應用開發中的穩定性，開發者們開始嘗試將這兩者結合起來，以開發出更可靠和高效的Mac應用程式。本文將介紹一些技巧和建議，幫助開發者正確整合Vue.js和Objective-C，並開發出高品質的Mac應用。一

使用Vue.js和Kotlin語言開發國際化支援的行動應用解決方案 Jul 31, 2023 pm 12:01 PM

使用Vue.js和Kotlin語言開發國際化支援的行動應用解決方案隨著全球化進程的加速進行，越來越多的行動應用需要提供多語言支援來滿足全球用戶的需求。在開發過程中，我們可以使用Vue.js和Kotlin語言來實現國際化的功能，使應用程式能夠在不同的語言環境下正常運作。一、Vue.js國際化支援Vue.js是一款受歡迎的JavaScript框架，提供了豐富的工具和特

使用Vue.js和Perl語言開發高效的網路爬蟲和資料抓取工具 Jul 31, 2023 pm 06:43 PM

使用Vue.js和Perl語言開發高效的網路爬蟲和資料抓取工具近年來，隨著網路的快速發展和資料的日益重要，網路爬蟲和資料抓取工具的需求也越來越大。在這個背景下，結合Vue.js和Perl語言開發高效率的網路爬蟲和資料抓取工具是個不錯的選擇。本文將介紹如何使用Vue.js和Perl語言開發這樣一個工具，並附上對應的程式碼範例。一、Vue.js和Perl語言的介

See all articles

vuejs怎麼修改背景色

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題