vue.js 的新手,想知道这是否是可能的结果。我有 8 种不同的背景颜色选项,我想根据给定的类名渲染它们。我可以用 css 实现这个,但想知道是否有 vue 的动态方式来实现这个。我理想的结果是只更改标记中的类名,然后它将呈现相关的背景颜色。
HTML:
<div class="page-header__container" :style="{ background: color }">
<div class="container">
<div class="row">
<div class="page-header">
<h1 class="page-header__text">
Page Header Lorem ipsUm
</h1>
</div>
js:
export default {
name: 'Header',
data() {
return {
color: '#333'
};
}
};
CSS:
bg-one{
background-color: #673AB7
}
bg-two{
background-color: #7293A0
}
bg-three{
background-color: #45B69C
}
最佳答案
https://jsfiddle.net/kyz19b7r/
new Vue({
el: "#app",
data: {
bgColour: 'blue',
classes: [ 'blue', 'red', 'green'
]
}
})
body {
background: #fff;
padding: 20px;
font-family: Helvetica;
}
#app {
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.blue {
background: blue;
}
.red {
background: red;
}
.green {
background: green;
}
<div id="app" :class="bgColour">
<select v-model="bgColour">
<option v-for="myClass in classes" :value="myClass">{{ myClass }}</option>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
关于javascript - 根据类名更改 vue.js 中的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59722100/