[Vuejs]-Vue.js: Have multiple different colored rows in table in v-for

You can create a computed property based on history and determine the theme inside that.

...

data () {
    return {
        history: []
    }
},
computed: {
    themedHistory () {
        this.history.map(item => {
            // determine the theme based on the item
            // const theme = ...

            return {
               ...item,
               theme
            }
        }
    }
}

And in your template

<tr :class="match.theme" v-for="match in themedHistory" :key="match.id">
    ...
</tr>