Es posible añadir la variable dinámica en estilo?

Me refiero a algo como:

<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 es estático. Si tu estilo es realmente complejo, tal vez usted necesita un poco de CSS pre-procesador.

4 Comentarios

  1. 13

    La mejor manera de incluir la dinámica de los estilos es el uso de CSS variables. Para evitar estilos en línea mientras se obtiene el beneficio (o necesidad—por ejemplo,, colores definidos por el usuario dentro de una carga de datos) de diseño dinámico, el uso de un <style> etiqueta en el interior de la <template> (por lo que los valores pueden ser insertados por Vue). El uso de un :root pseudo-clase para contener las variables de modo que sean accesibles a través de la CSS ámbito de la aplicación.

    Tenga en cuenta que algunos de los valores de CSS, como url() no puede ser interpolada, por lo que necesitan para completar las variables.

    Ejemplo (Nuxt .vue con ES6/ES2015 sintaxis):

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

    También se creó una alternativa más involucrados ejecutables ejemplo en Codepen.

    • Trató de su solución en el componente con <Plantillas> y este error: las Plantillas sólo debe ser responsable de la asignación del estado a la interfaz de usuario. Evitar la colocación de etiquetas con efectos secundarios en sus plantillas, como <estilo>, ya que no va a ser analizado.
    • Tengo el mismo problema como Nelly
  2. 6

    Yo se enfrentó al mismo problema.He estado tratando de utilizar el color de fondo valor de la base de datos.Me parece una buena solución para añadir un color de fondo valor en css en línea en la que el valor de I conjunto de la base de datos.

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

    Como usted está usando vuejs, Uso vuejs a cambio de fondo en lugar de css

    JS:

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

    HTML:

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

    • Genial, pero en una línea de método, no puedo agregar un fondo para la retina. Sé que método.
    • Usted puede agregar clase, alternar, v-show, v-si para lograr esto
    • Puedo hacerlo con dos div y clase para mostrar un div depende de la retina o no. Pero.. será la carga de dos imágenes de siempre. v-si o v-espectáculo de sonido buena, pero ¿cómo comprobar si estamos en una pantalla de retina con v-si? O cómo comprobar que en JS.. tal vez voy a encontrar la solución de esa manera.
  4. 0

    CSS <style> es estático. Yo no creo que se pueda hacer eso… puede que tenga que buscar un enfoque diferente.

    Puede intentar usar CSS variables. Por ejemplo, (código de abajo no está probado)

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

    Nota: Sólo los más recientes de los navegadores soportan CSS Variables.

    ACTUALIZACIÓN:

    Si usted todavía ve cualquier problema con el :style en la plantilla, a continuación, intente este,

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

Dejar respuesta

Please enter your comment!
Please enter your name here