Динамика Vue.js <style> with variables

Ответ 1

Лучший способ включить динамические стили - это использовать CSS-переменные. Чтобы избежать встроенных стилей и получить преимущество (или необходимость - например, определяемые пользователем цвета в полезной нагрузке данных) динамического стиля, используйте тег <style> внутри <template> (чтобы значения могли быть вставлены Vue). Используйте псевдокласс :root, чтобы содержать переменные, чтобы они были доступны через CSS-область приложения.

Обратите внимание, что некоторые значения CSS, такие как , как url(), не могут быть интерполированы, поэтому они должны быть полными переменными.

Пример (Nuxt .vue с ES6/ES2015 синтаксисом):

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

Также создан альтернативный более сложный исполняемый пример на Codepen.

Ответ 2

Я столкнулся с той же проблемой. Я пытался использовать значение цвета фона из базы данных. Я нашел хорошее решение для добавления значения цвета фона для встроенного CSS, которое я установил из базы данных.

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

Ответ 3

Когда вы используете vuejs, используйте vuejs для замены фона вместо 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>

Ответ 4

CSS <style> является статическим. Я не думаю, что вы можете это сделать... вам, возможно, придется искать другой подход.

Вы можете попробовать использовать переменные CSS. Например, (код ниже не проверен)

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

Примечание. Только новейшие браузеры поддерживают CSS Variables.

ОБНОВИТЬ:

Если вы все еще видите какие-либо проблемы с :style в шаблоне, попробуйте это,

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