我想<li>使用 vue 更改带有选择选项的颜色.js

Question

我是vue.js的新手，正在尝试使用select选项更改背景颜色。我尝试了这种方法cueCardsColor，但仍然没有发生任何事情

<ul>
<li :class="+ cueCardColor"> 
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</li>
</ul>

这是的值和方法

new Vue({
el: '...',
data: {
selected: 'Select color',
options: [
{ text: 'Green', value: 'green' },
{ text: 'Red', value: 'red' },
{ text: 'Blue', value: 'blue' }
]
},
computed:{
cueCardColor() {
if(this.selected!='Select color'){
return this.selected.options
}

}
}
})

Answer 1

您已经在this.selected:中有了颜色

new Vue({
el: '#app',
data: {
selected: 'Select color',
options: [
{ text: 'Green', value: 'green' },
{ text: 'Red', value: 'red' },
{ text: 'Blue', value: 'blue' }
]
},
computed:{
cueCardColor() {
if(this.selected!='Select color'){
return this.selected
}
return 'transparent'
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li :style="{ 'background-color': cueCardColor }"> 
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</li>
</ul>
</div>