web-dev-qa-db-ja.com

Vue.jsの変数を使用した動的な<style>

動的変数をスタイルに追加することは可能ですか？

私は次のようなものを意味します：

<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
17
Dominik Traskowski

動的スタイルを含める最良の方法は、 CSS変数 を使用することです。動的スタイルの利点（または必要性-eg、データペイロード内のユーザー定義の色）を得ながらインラインスタイルを回避するには、内部で<style>タグを使用します<template>の（Vueによって値を挿入できるようにするため）。 :root pseudo-class を使用して変数を含め、アプリケーションのCSSスコープ全体でアクセスできるようにします。

一部のCSS値 url()など は補間できないため、完全な変数である必要があります。

例（ Nuxt.vue with 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 で、より複雑な代替の実行可能な例を作成しました。

13
Mickey Mullin

私は同じ問題に直面しました。データベースの背景色の値を使用しようとしましたが、データベースから設定したインラインCSSに背景色の値を追加する良い解決策を見つけました。

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

Vuejsを使用しているので、CSSの代わりにvuejsを使用して背景を変更します

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>
3
Niklesh Raut

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をサポートしているのは最新のブラウザーのみです。

UPDATE：

それでもテンプレートの:styleに問題がある場合は、これを試してください。

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