Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

141
Visualizações
How to make class with with variable inside of html element in Vue?

I just want to write class plan__part_${this.res} within element

v-bind:class="{[`plan__part_${this.res}`]: true }"
:key="item.id"
></div>```
over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

As you can see in following snippet your code working fine, don't use this in template:

new Vue({
  el: '#demo',
  data() {
    return {
      res: '1',
      item: {id: 1}
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
.plan__part_1{
  background: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">     
  <div :class="{[`plan__part_${res}`]: true }" :key="item.id">
    {{ res }}
  </div>
</div>

over 4 years ago · Santiago Trujillo Relatório

0

For this case if your current implementation is not working then you can try using computed

v-bind:class="getClass"
:key="item.id"
></div>

and in

computed: {
 getClass() { 
  if(this.flag) return `plan__part_${this.res}`;
  return '';
 }

Note: this.flag is actually the boolean that you have used in the template

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda