Vue.js dynamique <style> avec des variables

Est-il possible d'ajouter la variable dynamique dans le style?

Je veux dire quelque chose comme:

<style>
 .class_name{
  background-image({{project.background}});
 }
@media all and (-webkit-min-device-pixel-ratio : 1.5),
 all and (-o-min-device-pixel-ratio: 3/2),
 all and (min--moz-device-pixel-ratio: 1.5),
 all and (min-device-pixel-ratio: 1.5) {
 .class_name{
  background-image({{project.background_retina}});
 } 
}
</style>

CSS est statique. Si votre style est vraiment très complexe, peut-être que vous aurez besoin d'un peu de CSS pré-processeur.

OriginalL'auteur Dominik Traskowski | 2017-11-16

8

La meilleure façon d'inclure des styles dynamiques est d'utiliser CSS variables. Pour éviter des styles en ligne tout en bénéficiant de l'avantage (ou l'état de nécessité—par exemple définies par l'utilisateur, les couleurs à l'intérieur des données de charge utile) de style dynamique, l'utilisation d'un <style> balise à l'intérieur de la <template> (de sorte que les valeurs peuvent être insérés par Vue). Utiliser un :root pseudo-classe pour contenir les variables de sorte qu'ils sont accessibles à travers le CSS de la portée de l'application.

Noter que certains CSS valeurs, comme url() ne peut pas être interpolées, de sorte qu'ils doivent être complets variables.

Exemple (Nuxt .vue avec ES6/ES2015 syntaxe):
```
<template>

<div>
  <style>
    :root {
      --accent-color: {{ accentColor }};
      --hero-image: url('{{ heroImage }}');
    }
  </style>
  <div class="punchy">
    <h1>Pow.</h1>
  </div>
</div>

</template>
<script>

export default {
  data() { return {
    accentColor: '#f00',
    heroImage: 'https://vuejs.org/images/logo.png',
  }},
}

</script>
<style>

.punchy {
  background-image: var(--hero-image);
  border: 4px solid var(--accent-color);
  display: inline-block;
  width: 250px; height: 250px;
}
h1 {
  color: var(--accent-color);
}

</style>
```
Également créé un autre plus impliqués praticable exemple sur Codepen.

Essayé votre solution dans le composant avec <Templates>, et vous obtenez cette erreur: les Modèles ne devrait être responsable de la cartographie de l'état de l'INTERFACE utilisateur. Évitez de placer des étiquettes avec des effets secondaires dans vos modèles, comme <style>, car ils ne seront pas analysées.

OriginalL'auteur Mickey Mullin
4

J'ai connu le même problème.J'ai essayé d'utiliser la couleur d'arrière-plan de la valeur à partir de la base de données.- Je trouver une bonne solution pour ajouter une couleur d'arrière-plan de la valeur sur les css qui valeur que j'partir de la base de données.
```
<img  :src="/Imagesource.jpg" alt="" :style="{'background-color':Your_Variable_Name}">
```
OriginalL'auteur Didarul Alam Rahat

CSS <style> est statique. Je ne pense pas que vous pouvez le faire... vous pourriez avoir à regarder pour une approche différente.

Vous pouvez essayer d'utiliser CSS variables. Par exemple, le code ci-dessous n'est pas testé)

<template>
  <div class="class_name" :style="{'--bkgImage': 'url(' + project.background + ')', '--bkgImageMobile': 'url(' + project.backgroundRetina + ')'}">
  </div>
</template>

<style>
  .class_name{
      background-image: var(--bkgImage);
  }
  @media all and (-webkit-min-device-pixel-ratio : 1.5),
     all and (-o-min-device-pixel-ratio: 3/2),
     all and (min--moz-device-pixel-ratio: 1.5),
     all and (min-device-pixel-ratio: 1.5) {
        .class_name{
            background-image: var(--bkgImageMobile);
        } 
  }
</style>

Remarque: Seuls les plus récentes des navigateurs prennent en charge CSS Variables.

Mise à JOUR:

Si vous voyez toujours des problèmes avec la :style dans le modèle alors essayez celui-ci,

<div :style="'--bkgImage: url(' + project.background + '); --bkgImageMobile: url(' + project.backgroundRetina + ')'">
</div>

OriginalL'auteur Muthu Kumaran

Vous devez vous connecter pour publier un commentaire.