コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド Vue.js vuejsで背景色を変更する方法

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タグがないため、単体コンポーネントの背景色を変更するには、次の Just コードを追加するだけです。 

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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前 By 尊渡假赌尊渡假赌尊渡假赌
レポ：チームメイトを復活させる方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
3週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7322
9
Java チュートリアル
1625
14
CakePHP チュートリアル
1350
46
Laravel チュートリアル
1262
25
PHP チュートリアル
1209
29
もっと見る
Related knowledge
Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのヒント Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのヒント Jul 31, 2023 pm 02:17 PM

Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのヒント モバイル アプリケーションの人気とユーザー ニーズの継続的な成長により、Android アプリケーションの開発は開発者からますます注目を集めています。 Android アプリを開発する場合、適切なテクノロジー スタックを選択することが重要です。近年、Vue.js 言語と Kotlin 言語が Android アプリケーション開発の選択肢として徐々に人気になってきています。この記事では、Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのテクニックをいくつか紹介し、対応するコード例を示します。 1. 最初に開発環境をセットアップする

Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒント Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒント Jul 31, 2023 pm 07:53 PM

Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒント はじめに: ビッグ データ時代の到来により、データ視覚化は重要なソリューションになりました。データ視覚化アプリケーションの開発では、Vue.js と Python を組み合わせることで、柔軟性と強力な機能を提供できます。この記事では、Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒントをいくつか紹介し、対応するコード例を添付します。 1. Vue.js の概要 Vue.js は軽量の JavaScript です。

Vue.js と Objective-C の統合、信頼性の高い Mac アプリを開発するためのヒントとアドバイス Vue.js と Objective-C の統合、信頼性の高い Mac アプリを開発するためのヒントとアドバイス Jul 30, 2023 pm 03:01 PM

Vue.js と Objective-C 言語の統合、信頼性の高い Mac アプリケーションを開発するためのヒントと提案 近年、フロントエンド開発における Vue.js の人気と Mac アプリケーション開発における Objective-C の安定性により、開発者はこの 2 つを組み合わせて、より信頼性が高く効率的な Mac アプリケーションを開発しようとしています。この記事では、開発者が Vue.js と Objective-C を正しく統合し、高品質の Mac アプリケーションを開発するのに役立ついくつかのヒントと提案を紹介します。 1つ

PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法 PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法 Aug 27, 2023 am 11:51 AM

PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法 Web 開発では、グラフはデータを表示する非常に一般的な方法です。 PHP と Vue.js を使用すると、グラフ上にデータのフィルタリングおよび並べ替え機能を簡単に実装でき、ユーザーがグラフ上のデータの表示をカスタマイズできるようになり、データの視覚化とユーザー エクスペリエンスが向上します。まず、グラフで使用するデータのセットを準備する必要があります。名前、年齢、学年の 3 つの列を含むデータ テーブルがあるとします。データは次のとおりです: 名前、年齢、学年 Zhang San 1890 Li

Vue.js と Perl 言語を使用して効率的な Web クローラーとデータ スクレイピング ツールを開発します。 Vue.js と Perl 言語を使用して効率的な Web クローラーとデータ スクレイピング ツールを開発します。 Jul 31, 2023 pm 06:43 PM

Vue.js と Perl 言語を使用して、効率的な Web クローラーとデータ スクレイピング ツールを開発します。近年、インターネットの急速な発展とデータの重要性の増大に伴い、Web クローラーとデータ スクレイピング ツールの需要も増加しています。この文脈では、Vue.js と Perl 言語を組み合わせて効率的な Web クローラーとデータ スクレイピング ツールを開発することは良い選択です。この記事では、Vue.js と Perl 言語を使用してこのようなツールを開発する方法を紹介し、対応するコード例を添付します。 1. Vue.js と Perl 言語の概要

Vue.js と Lua 言語の統合、ゲーム開発用のフロントエンド エンジン構築におけるベスト プラクティスと経験の共有 Vue.js と Lua 言語の統合、ゲーム開発用のフロントエンド エンジン構築におけるベスト プラクティスと経験の共有 Aug 01, 2023 pm 08:14 PM

Vue.js と Lua 言語の統合、ゲーム開発用のフロントエンド エンジンを構築するためのベスト プラクティスと経験の共有 はじめに: ゲーム開発の継続的な開発に伴い、ゲーム フロントエンド エンジンの選択は重要な決定となっています。これらの選択肢の中で、Vue.js フレームワークと Lua 言語が多くの開発者の注目を集めています。人気のフロントエンド フレームワークとして、Vue.js は豊富なエコシステムと便利な開発方法を備えていますが、Lua 言語は軽量で効率的なパフォーマンスのため、ゲーム開発で広く使用されています。この記事では、その方法について説明します。

Vue を使用して QQ のようなチャット バブル効果を実装する方法 Vue を使用して QQ のようなチャット バブル効果を実装する方法 Sep 20, 2023 pm 02:27 PM

Vue を使用して QQ のようなチャット バブル効果を実装する方法 今日のソーシャル時代において、チャット機能はモバイル アプリケーションや Web アプリケーションの中核機能の 1 つとなっています。チャット インターフェイスで最も一般的な要素の 1 つはチャット バブルです。これにより、送信者のメッセージと受信者のメッセージを明確に区別でき、メッセージの読みやすさが効果的に向上します。この記事では、Vue を使用して QQ のようなチャット バブル効果を実装する方法を紹介し、具体的なコード例を示します。まず、チャット バブルを表す Vue コンポーネントを作成する必要があります。コンポーネントは 2 つの主要な部分で構成されます

Vue.js と JavaScript を使用してスマート コントラクトとブロックチェーン アプリケーションを開発するためのガイド Vue.js と JavaScript を使用してスマート コントラクトとブロックチェーン アプリケーションを開発するためのガイド Jul 30, 2023 pm 03:18 PM

Vue.js と JavaScript を使用したスマート コントラクトとブロックチェーン アプリケーションの開発ガイド はじめに: ブロックチェーン テクノロジーの発展に伴い、イーサリアムはスマート コントラクト プラットフォームとして開発者に大きな利便性を提供します。 Vue.js は、人気のある JavaScript フレームワークとして、開発者に強力なフロントエンド技術サポートを提供します。この記事では、Vue.js と JavaScript を使用してスマート コントラクトとブロックチェーン アプリケーションを開発する方法について、コード例とともにガイドを提供します。序盤の環境準備

See all articles