Question

是否可以在样式中添加动态变量？

＆＃xA;＆＃xA;

我的意思是：

＆＃xA;＆＃xA;

 <代码>＆LT;风格＆GT;＆＃XA; .class_name {＆＃XA;背景图像（{{project.background}}）;＆＃XA; }＆＃xA; @media all和（-webkit-min-device-pixel-ratio：1.5），＆＃xA; all和（-o-min-device-pixel-ratio：3/2），＆＃xA;全部和（min  -  moz-device-pixel-ratio：1.5），＆＃xA; all和（min-device-pixel-ratio：1.5）{＆＃xA; .class_name {＆＃XA;背景图像（{{project.background_retina}}）;＆＃XA; }＆＃xA;}＆＃xA;＆lt; / style＆gt;＆＃xA;

＆＃xA;

Answer 1

包含动态样式的最佳方法是使用DirectExecute。为了避免内联样式同时获得动态样式的好处（或必要性 - 例如，用户定义的数据有效负载内的颜色），请使用<style>内的<template>标记（这样可以通过Vue插入值）。使用CSS variables包含变量，以便可以跨应用程序的CSS范围访问它们。

请注意，某些CSS值:root pseudo-class无法插值，因此它们必须是完整的变量。

示例（like url() .vue具有Nuxt语法）：

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

还在ES6/ES2015上创建了另一个更复杂的可运行示例。

Answer 2

我遇到了同样的问题。我一直在尝试使用数据库中的背景色值。我找到了一个很好的解决方案，可以在我从数据库中设置的内联css上添加背景色值。

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

Answer 3

当您使用vuejs时，使用vuejs来改变背景而不是css

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在这里晚了聚会，但是可以。 Vue在模板中不支持style标记，但是您可以使用component标记来解决此问题。未经测试的伪代码：

在您的模板中：

<component type="style" v-html="style"></component>

在您的脚本中：

props: {
    color: String
}
computed: {
    style() {
        return `.myJSGeneratedStyle { color: ${this.color} }`;
    }
}

有许多原因使您不应该使用此方法，它肯定很hacky，:style=""在大多数情况下可能会更好，但是对于您的媒体查询问题，我认为这是一个很好的解决方案。 / p>

Answer 5

我遇到了同样的问题，我想出了一个适合我的需求（也许还有你的需求）的 hack。

由于 <style> 包含在 <head> 中，因此有一种方法可以使其工作：

我们根据页面/组件的状态生成 css 作为计算属性

computed: {
    css() {
        return `<style type="text/css">
         .bg {
            background: ${this.bg_color_string};
         }</style>`
    }
}

现在，我们的样式是一个字符串，唯一的挑战是将它传递给浏览器。

我将此添加到我的 <head>

<style id="customStyle"></style>

然后我在页面加载后调用 setInterval。

 mounted() {
     setInterval(() => this.refreshHead(), 1000);
 }

我这样定义refreshHead：

methods: { 
   refreshHead() {
       document.getElementById('customStyle').innerHTML = this.css
   }
}

Answer 6

CSS <style>是静态的。我认为你不能这样做......你可能不得不寻找一种不同的方法。

您可以尝试使用CSS variables。例如，（以下代码未经过测试）

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

Answer 7

简单来说，这就是你在 Vue/nuxt 中的做法。

<template>
 <div>
    <img  :src="dynamicImageURL" alt="" :style="'background-color':backgroundColor"/>
</div>
</template>

<script>
export default{
    data(){
       return {
             dynamicImageURL='myimage.png',
             backgroundColor='red',
        }
    }
}
</script>

Answer 8

可以使用 vue 提供的组件标签。

<template> 
  <component :is="`style`"> 
    .cg {color: {{color}};} 
  </component> 
  <p class="cg">I am green</p> <br/>
  <button @click="change">change</button>
</template> 
<script> 
  export default { 
    data(){ 
      return { color: 'green' }
    },
    methods: {
      change() {this.color = 'red';}
    }
  } 
</script>

Vue.js带有变量的动态<style>

8 个答案: