[Vuejs]-Mix Dynamic class with data binders in Vue.js

by

2👍

✅

You can use the v-bind:class – which allows you to append two strings, just like in Javascript. So the value should be 'owf owf-' + item.weather[0].id.

In the snippet, I’ve done that with dummy data and color changes for two different classes, but you should get the idea.

var app = new Vue({
  el: "#app",
  data:{ 
    items: [
      {
        weather: [{ id: 200 }],
        txt: "Some text"
      },
      {
        weather: [{ id: 300 }],
        txt: "Some other text"
      }
    ]
  }
});
.owf.owf-200 {
  color: red;
}

.owf.owf-300 {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="app">
  <template v-for="item in items">
    <span v-bind:class="'owf owf-' + item.weather[0].id">
      {{ item.txt }}
    </span>  
    <br />
  </template>
</div>
👤Nisarg Shah

Leave a comment