Comment changer la couleur d'arrière-plan dans vuejs
Comment modifier la couleur d'arrière-plan de vuejs : 1. Introduire un style CSS commun dans index.html ; 2. Modifier la couleur d'arrière-plan d'un seul composant en ajoutant le code "beforeCreate () {...}".
L'environnement d'exploitation de cet article : système windows7, version vue2.5.17, ordinateur Dell G3.
Comment changer la couleur de fond dans vuejs ?
Vue implémente l'opération de changement de couleur d'arrière-plan
comme suit :
<!-- 分页上下页改变背景图效果 -->
<!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>
<!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>Connaissances supplémentaires : vue définit la couleur d'arrière-plan de manière uniforme et modifie la couleur d'arrière-plan d'une certaine page individuellement
Parfois, nous rencontrons le problème de changer la couleur de remplissage d'arrière-plan d'un composant individuellement, et nous avons introduit un style CSS commun dans index.html (la couleur d'arrière-plan est définie dans le corps puisqu'un seul composant n'a pas de corps). balise, nous devons modifier un seul composant. Pour définir la couleur d’arrière-plan du composant, ajoutez simplement le code suivant.
beforeCreate () {
document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;');
}Apprentissage recommandé : "tutoriel vue"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Quelques conseils pour développer des applications Android en utilisant Vue.js et le langage Kotlin
Jul 31, 2023 pm 02:17 PM
Quelques conseils pour développer des applications Android en utilisant Vue.js et le langage Kotlin Avec la popularité des applications mobiles et la croissance continue des besoins des utilisateurs, le développement d'applications Android attire de plus en plus l'attention des développeurs. Lors du développement d’applications Android, il est crucial de choisir la bonne pile technologique. Ces dernières années, les langages Vue.js et Kotlin sont progressivement devenus des choix populaires pour le développement d'applications Android. Cet article présentera quelques techniques de développement d'applications Android à l'aide du langage Vue.js et Kotlin, et donnera des exemples de code correspondants. 1. Configurer l'environnement de développement au début
Quelques conseils pour développer des applications de visualisation de données à l'aide de Vue.js et Python
Jul 31, 2023 pm 07:53 PM
Quelques conseils pour développer des applications de visualisation de données à l'aide de Vue.js et Python Introduction : Avec l'avènement de l'ère du big data, la visualisation de données est devenue une solution importante. Dans le développement d'applications de visualisation de données, la combinaison de Vue.js et Python peut offrir de la flexibilité et des fonctions puissantes. Cet article partagera quelques conseils pour développer des applications de visualisation de données à l'aide de Vue.js et Python, et joindra des exemples de code correspondants. 1. Introduction à Vue.js Vue.js est un JavaScript léger
Intégration de Vue.js avec Objective-C, astuces et conseils pour développer des applications Mac fiables
Jul 30, 2023 pm 03:01 PM
Intégration du langage Vue.js et Objective-C, conseils et suggestions pour développer des applications Mac fiables Ces dernières années, avec la popularité de Vue.js dans le développement front-end et la stabilité d'Objective-C dans le développement d'applications Mac, les développeurs commencent. essayer de combiner les deux pour développer des applications Mac plus fiables et plus efficaces. Cet article présentera quelques conseils et suggestions pour aider les développeurs à intégrer correctement Vue.js et Objective-C et à développer des applications Mac de haute qualité. un
Comment utiliser PHP et Vue.js pour implémenter des fonctions de filtrage et de tri des données sur les graphiques
Aug 27, 2023 am 11:51 AM
Comment utiliser PHP et Vue.js pour implémenter des fonctions de filtrage et de tri des données sur des graphiques. Dans le développement Web, les graphiques sont un moyen très courant d'afficher des données. À l'aide de PHP et Vue.js, vous pouvez facilement implémenter des fonctions de filtrage et de tri des données sur les graphiques, permettant aux utilisateurs de personnaliser l'affichage des données sur les graphiques, améliorant ainsi la visualisation des données et l'expérience utilisateur. Tout d’abord, nous devons préparer un ensemble de données que le graphique pourra utiliser. Supposons que nous ayons un tableau de données contenant trois colonnes : nom, âge et notes. Les données sont les suivantes : nom, âge, note, Zhang San, 1890 Li.
Développer des robots d'exploration Web et des outils de récupération de données efficaces à l'aide des langages Vue.js et Perl
Jul 31, 2023 pm 06:43 PM
Utilisez les langages Vue.js et Perl pour développer des robots d'exploration Web et des outils de récupération de données efficaces. Ces dernières années, avec le développement rapide d'Internet et l'importance croissante des données, la demande de robots d'exploration Web et d'outils de récupération de données a également augmenté. Dans ce contexte, c'est un bon choix de combiner le langage Vue.js et Perl pour développer des robots d'exploration Web et des outils de scraping de données efficaces. Cet article expliquera comment développer un tel outil à l'aide du langage Vue.js et Perl, et joindra des exemples de code correspondants. 1. Introduction au langage Vue.js et Perl
Intégration des langages Vue.js et Lua, bonnes pratiques et partage d'expérience dans la construction de moteurs front-end pour le développement de jeux
Aug 01, 2023 pm 08:14 PM
L'intégration des langages Vue.js et Lua, les meilleures pratiques et le partage d'expériences pour la construction d'un moteur frontal pour le développement de jeux Introduction : Avec le développement continu du développement de jeux, le choix du moteur frontal de jeu est devenu une décision importante. Parmi ces choix, le framework Vue.js et le langage Lua sont devenus le focus de nombreux développeurs. En tant que framework frontal populaire, Vue.js dispose d'un écosystème riche et de méthodes de développement pratiques, tandis que le langage Lua est largement utilisé dans le développement de jeux en raison de ses performances légères et efficaces. Cet article explorera comment
Comment utiliser Vue pour implémenter des effets de bulle de discussion de type QQ
Sep 20, 2023 pm 02:27 PM
Comment utiliser Vue pour implémenter des effets de bulle de discussion de type QQ À l'ère sociale d'aujourd'hui, la fonction de discussion est devenue l'une des fonctions essentielles des applications mobiles et des applications Web. L'un des éléments les plus courants de l'interface de chat est la bulle de discussion, qui permet de distinguer clairement les messages de l'expéditeur et du destinataire, améliorant ainsi efficacement la lisibilité du message. Cet article expliquera comment utiliser Vue pour implémenter des effets de bulle de discussion de type QQ et fournira des exemples de code spécifiques. Tout d'abord, nous devons créer un composant Vue pour représenter la bulle de discussion. Le composant se compose de deux parties principales
Un guide pour développer des contrats intelligents et des applications blockchain à l'aide de Vue.js et JavaScript
Jul 30, 2023 pm 03:18 PM
Un guide pour développer des contrats intelligents et des applications blockchain à l'aide de Vue.js et JavaScript Introduction : Avec le développement de la technologie blockchain, Ethereum, en tant que plate-forme de contrats intelligents, offre aux développeurs une grande commodité. Vue.js, en tant que framework JavaScript populaire, fournit aux développeurs un puissant support technique frontal. Cet article fournira un guide sur la façon d'utiliser Vue.js et JavaScript pour développer des contrats intelligents et des applications blockchain, avec des exemples de code. Préparation de l'environnement au début
