web-dev-qa-db-fra.com

Vue.js dynamic <style> avec 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>
cssvue.jsvuejs2
6
Dominik Traskowski

Le meilleur moyen d'inclure des styles dynamiques est d'utiliser variables CSS . Pour éviter les styles en ligne tout en obtenant l'avantage (ou la nécessité —p. Ex., Couleurs définies par l'utilisateur dans une charge utile de données) du style dynamique, utilisez une balise <style> à l'intérieur du <template> (pour que les valeurs puissent être insérées par Vue). Utilisez un :root pseudo-class pour contenir les variables afin qu’elles soient accessibles dans l’étendue CSS de l’application.

Notez que certaines valeurs CSS, telles que comme url() ne peuvent pas être interpolées, elles doivent donc être des variables complètes.

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 exemple d'exécution plus complexe sur Codepen .

2
Mickey Mullin

Comme vous utilisez vuejs, utilisez vuejs pour changer d’arrière-plan css

var vm = new Vue({
  el: '#vue-instance',
  data: {
    rows: [
      {value: 'green'},
      {value: 'red'},
      {value: 'blue'},
    ],
    item:""
  },
  methods:{
  	  onTimeSlotClick: function(item){
         console.log(item);
      	document.querySelector(".dynamic").style.background = item;
      }

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
   <select class="form-control" v-model="item" v-on:change="onTimeSlotClick(item)">
         <option value="">Select</option>
        <option v-for="row in rows">
          {{row.value}}
        </option>
      </select>
      <div class='dynamic'>VALUE</div>
      <br/><br/>
      <div :style="{ background: item}">Another</div>
</div>

2
Niklesh Raut

J'ai rencontré le même problème.J'ai essayé d'utiliser la valeur de couleur d'arrière-plan de la base de données.J'ai trouvé une bonne solution pour ajouter une valeur de couleur d'arrière-plan sur inline css quelle valeur j'ai définie à partir de la base de données.

<img  :src="/Imagesource.jpg" alt="" :style="{'background-color':Your_Variable_Name}">
1
Didarul Alam Rahat

CSS <style> est statique. Je ne pense pas que vous puissiez faire cela ... vous pourriez avoir à chercher une approche différente. 

Vous pouvez essayer d'utiliser variables CSS . 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 derniers navigateurs prennent en charge CSS Variables. 

METTRE À JOUR:

Si vous voyez toujours des problèmes avec le :style dans le modèle, essayez ceci,

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