Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

135
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda