How to change style depend on key in v-for? - vue.js

Question

I am trying to write small app that change style depend on key in v-for loop. I can't figure out how to change style.
I want to colorize one as blue, two as green, three as red.
<div id="app">
<table>
<template v-for="(v,k) in tableData">
<tr v-bind:class="background-color: {{k}}">
{{v}}
</tr>
</template>
</table>
</div>
code:
new Vue({
el: '#app',
data: {
tableData:
{
"one": "I am one",
"two": "I am two",
"three": "I am three",
}
}
})
Here is my code https://jsfiddle.net/pevLgf0b/
it's seems that I should use computed property, but I can't understand how to do it in right way.

Answer 1

demo: https://jsfiddle.net/jacobgoh101/y295qd04/
you can use method to get different color dynamically
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<template v-for="(v,k) in tableData">
<tr v-bind:style="style(k)">
<td>
{{v}}
</td>
</tr>
</template>
</table>
</div>
new Vue({
el: '#app',
data: {
tableData: {
"one": "I am one",
"two": "I am two",
"three": "I am three",
}
},
methods: {
style(k) {
switch (k) {
case 'one':
return {
backgroundColor: 'red'
}
case 'two':
return {
backgroundColor: 'green'
}
case 'three':
return {
backgroundColor: 'blue'
}
}
}
}
})

Answer 2

You can add one more data object for colors.
https://jsfiddle.net/pevLgf0b/
new Vue({
el: '#app',
data: {
tableData:
{
"one": "I am one",
"two": "I am two",
"three": "I am three",
},
colorData:{
"one" : "blue",
"two" : "green",
"three" : "red",
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<template v-for="(v,k) in tableData">
<tr v-bind:style="{ 'background-color': colorData[k] }">
<td>{{v}} </td>
</tr>
</template>
</table>
</div>

Answer 3

In my case this work perfectly,
I've bind class based on the key. I have created a function which will return appropriate class based on the value and the style is applied.
Try this:
<template>
<table>
<template v-for="(v,k) in tableData">
<tr v-bind:class="applyStyle(k)">
<td>{{v}}</td>
</tr>
</template>
</table>
</template>
<script>
export default {
data() {
return {
tableData: {
one: "I am one",
two: "I am two",
three: "I am three"
}
}
},
methods: {
applyStyle(value) {
if (value == "one") {
return "applyRed";
}
if (value == "two") {
return "applyGreen";
}
if (value == "three") {
return "applyBlue";
}
}
}
};
</script>
<style>
.applyRed {
background-color: red;
}
.applyGreen {
background-color: green;
}
.applyBlue {
background-color: blue;
}
</style>