-2

tenho uma tabela que possui valores ativos e inativos. quando ativo, queria que ele ficasse verde, e quando estiver inativo, fique vermelho.

<span>{{ data.active ? 'Ativo' : 'Inativo' }}</span>

esse é meu if ternário que mostra os valores. Gostaria de fazer isso usando o Vue.js, mas ainda não entendo muito do framework

0

1 Resposta 1

0

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .