问题描述
限时送ChatGPT账号..vue.js 的新手,我想知道这是否是可能的结果.我有 8 个不同的背景颜色选项,我想根据给定的类名进行渲染.我可以用 css 实现这一点,但想知道 vue 是否有一种动态方式来实现这一点.我的理想结果是更改标记中的类名,然后它会呈现关联的背景颜色.
HTML:
<div class="容器"><div class="row"><div class="page-header"><h1 class="page-header__text">页眉 Lorem ipsUm
js:
出口默认{name: '标题',数据() {返回 {颜色:'#333'};}};
CSS:
bg-one{背景色:#673AB7}BG-二{背景颜色:#7293A0}BG-三{背景颜色:#45B69C}
解决方案 https://jsfiddle/kyz19b7r/
new Vue({el: "#app",数据: {bgColour: '蓝色',类:['蓝色','红色','绿色']}})
body {背景:#fff;填充:20px;字体系列:Helvetica;}#应用程序 {边框半径:4px;填充:20px;过渡:全0.2s;}.蓝色 {背景:蓝色;}.红色的 {背景:红色;}.绿色 {背景:绿色;}
<select v-model="bgColour"><option v-for="myClass in classes" :value="myClass">{{ myClass }}</option></选择><script src="https://cdnjs.cloudflare/ajax/libs/vue/2.5.17/vue.js"></script>
New to vue.js and am wondering if this is a possible outcome. I have 8 different options of a background color that I want to render based on the given class name. I can achieve this with css but was wondering if there is a dynamic way with vue to accomplish this. my ideal outcome would be just change the class name in the markup and it will then render that associated bg color.
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/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/ajax/libs/vue/2.5.17/vue.js"></script>
这篇关于根据类名更改 vue.js 中的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论