Uma maneira simples de resolver o problema é utilizando o bind com a html property class
. Isso deve ser feito dentro do escopo do template. Depois basta declarar um novo style scoped em seu componente.
O motivo de usar o style scoped é para forçar as classes css a só existirem neste componente.
Segue uma possível implementação se utilizar um componente vuejs.
<template>
<span :class="active ? 'corvd' : 'corvm'">teste</span>
</template>
<script>
export default {
data() {
return {
active: false
}
}
}
</script>
<style scoped>
.corvd {
color: green;
}
.corvm {
color: red;
}
</style>
O mesmo nome da class
utilizado, deve ser declarado no bloco (inclusive com o "." na definição da classe css), quando iniciado com o . estamos declarando um alias para uma classe css.
Uma solução utilizando o style
Para esta solução não é necessário declarar a classe, nem um style scoped. Pois estamos mudando diretamente o atributo color do atributo style
do elemento span. Então basta setar o style inline da seguinte forma:
<template>
<span :style="{color: active ? 'green': 'red'}">Teste</span>
</template>
<script>
export default {
data() {
return {
active: true
}
}
}
</script>
Para mais informações consulte a documentação.