CSS 带有变量的 Vue.js 动态 <style>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47322875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js dynamic <style> with variables
提问by Dominik Traskowski
Is it possible to add the dynamic variable in style?
是否可以在样式中添加动态变量？
I mean something like:
我的意思是这样的：
<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>
回答by Mickey Mullin
The best way to include dynamic styles is to use CSS variables. To avoid inline styles while gaining the benefit (or necessity—e.g., user-defined colors within a data payload) of dynamic styling, use a <style>tag inside of the <template>(so that values can be inserted by Vue). Use a :rootpseudo-classto contain the variables so that they are accessible across the CSS scope of the application.
包含动态样式的最佳方法是使用CSS 变量。为了避免内联样式同时获得动态样式的好处（或必要性——例如，数据负载中的用户定义颜色），请在 中使用<style>标签<template>（以便 Vue 可以插入值）。使用:root伪类来包含变量，以便在应用程序的 CSS 范围内可以访问它们。
Note that some CSS values, like url()cannot be interpolated, so they need to be complete variables.
请注意，某些 CSS 值，例如url()不能插值，因此它们需要是完整的变量。
Example (Nuxt.vuewith ES6/ES2015syntax):
实施例（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>
Also created an alternate more involved runnable example on Codepen.
还在Codepen上创建了一个替代的更复杂的可运行示例。
回答by Didarul Alam Rahat
I faced the same problem.I have been trying to use background color value from database.I find out a good solution to add a background color value on inline css which value I set from database.
我遇到了同样的问题。我一直在尝试使用数据库中的背景颜色值。我找到了一个很好的解决方案，可以在我从数据库中设置的内联 css 上添加背景颜色值。
<img :src="/Imagesource.jpg" alt="" :style="{'background-color':Your_Variable_Name}">
回答by Niklesh Raut
As you are using vuejs, Use vuejs to change background instead css
当您使用 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>回答by Muthu Kumaran
CSS <style>is static. I don't think you can do that... you might have to look for a different approach.
CSS<style>是静态的。我不认为你可以这样做......你可能不得不寻找不同的方法。
You can try using CSS variables. For example, (code below is not tested)
您可以尝试使用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>
Note: Only latest browsers support CSS Variables.
注意：只有最新的浏览器支持CSS Variables.
UPDATE:
更新：
If you still see any issues with the :stylein the template then try this,
如果您仍然看到:style模板中的任何问题，请尝试此操作，
<div :style="'--bkgImage: url(' + project.background + '); --bkgImageMobile: url(' + project.backgroundRetina + ')'">
</div>
回答by Shahrukh Anwar
I have something dynamic to manipulate the SCSS with JS and with less code. I used it with bulma as follows
我有一些动态的东西可以用 JS 和更少的代码来操纵 SCSS。我将它与 bulma 一起使用如下
<style lang="scss" scoped>
$size-10: 10px;
$size-9: 20px;
$size-8: 30px;
$size-7: 10px;
$size-6: 20px;
$size-5: 30px;
$size-4: 40px;
$size-3: 50px;
$size-2: 60px;
$size-1: 70px;
$sizes: (
1,
2,
3,
4,
5,
6,
7,
8,
9,
10
);
$positions: (
"top",
"left",
"bottom",
"right"
);
$bulmaSizes: (
$size-1,
$size-2,
$size-3,
$size-4,
$size-5,
$size-6,
$size-7,
$size-8,
$size-9,
$size-10
);
$i: 1;
@each $size in $sizes {
$sizee: nth($bulmaSizes, $i);
$i: $i+1;
.has-margin-#{$size} {
margin: $sizee !important;
}
@each $position in $positions {
.has-padding-#{$position}-#{$size} {
margin-#{$position}: $sizee !important;
}
}
}
</style>
Hope this will help some of you guys.
希望这会帮助你们中的一些人。
