vuejs condition

cambiar clase con condicion

by femfoyou

HTML

<ul v-for="d in datos">
  <li :class="{'rojo' : d.edad1 <= 5, 'amarillo' : d.edad1 > 5 && d.edad1 <= 10, 'verde' : d.edad1 > 10}">{{d.edad1}}</li>
</ul>



{{$data | json}}

CSS

.rojo {
	color: red;
}
.verde {
	color: green;
}
.amarillo {
	color: #f0ba38;
}

JavaScript

// <span :class="{'rojo' : datos.edad1 <= 5, 'amarillo' : datos.edad1 > 5 && datos.edad1 <= 10, 'verde' : datos.edad1 > 10}">{{ datos.edad1 }}</span>
var app = new Vue({
  el: 'body',
  data: {
  	
    edad: 11,
    
    datos : [
      {edad1: 7, edad2: 4, edad3: 11},
      {edad1: 11, edad2: 7, edad3: 4},
      {edad1: 4, edad2: 11, edad3: 7},
    ],
  }
})