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

Question

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

我的意思是:

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

Answer 1

使用Vue.js 3.2，你可以像这样执行状态驱动的动态 CSS：

<template>
    <h1 id="script">Script</h1>
    <h1 id="scriptSetup">Script setup</h1>
</template>

<script>
  export default {
    data() {
      return {
        colorFromScript: 'red'
      }
    }
  }
</script>

<script setup>
const colorFromScriptSetup = 'green'
</script>

<style>
  #script {
      color: v-bind('colorFromScript')
  }

  #scriptSetup {
      color: v-bind('colorFromScriptSetup')
  }
</style>

请参阅此处的实现

CSS 文档中的 v-bind

Answer 2

包含动态样式的最佳方法是使用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上创建了另一个更复杂的可运行示例。

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

Answer 4

是的，这是可能的。Vue.js 不支持style模板中的标签，但您可以通过使用标签来解决这个问题component。未经测试的伪代码：

在您的模板中：

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

在你的脚本中：

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

有很多原因导致您不应该使用此方法。这绝对是hacky，并且:style=""在大多数情况下可能更好，但对于您的媒体查询问题，我认为这是一个很好的解决方案。

Answer 5

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>

Answer 6

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

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

Answer 7

Vue 3 状态驱动的动态 CSS 变量

我知道这有点晚了，并且正在使用 Vue.js 2，但截至目前，在 Vue.js 3 中您可以创建状态驱动的 CSS 变量。

您现在可以在样式标签内使用 SFC（单文件组件）状态数据，使用v-bind().

您可以在此处阅读有关状态驱动 CSS 变量的更多信息，或在此处阅读 Vue.js 3 文档。

这是一个代码示例

例子

<template>
  <div>
    <input type="text" v-model="color" />
    <div class="user-input-color">
      {{ color }}
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    color: 'white'
  })
}
</script>

<style scoped>
.user-input-color {
  background-color: v-bind(color)
}
</style>

这是现场示例的链接。

链接

• JS Now Vue 状态驱动 CSS 变量
• Vue.js 3 文档
• 实例

Answer 8

您可以使用 Vue.js 提供的组件标签。

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