Vuejs add conditional style formatting

Issue

I have a simple table rendered which i would like to add some conditional css style formatting to the cells based on the value in that cell. e.g.

If the value of area1 == 'one' assign td-one css style

      <tr v-for="version in versions" :key="version.id">
        <td>{{version.name}}</td>
        <td>{{version.area1}}</td>
        <td>{{version.area2}}</td>
        <td>{{version.area1}}</td>
        <td>{{version.area4}}</td>
      </tr>

Script:

<script>
export default {
  name: 'versions-table',
  props: {
    msg: String
  },
  data () {
    return {
      versions: [
              {
                id: '1',
                name: 'Name1',
                area1: 'one',
                area2: 'one',
                area3: 'two',
                area4: 'three'
              }
           ]
        }
    }
}

CSS

<style scoped>
  table {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }
  td {
    padding: 5px;
  }

  .td-one {
    background-color: green;
  }

  .td-two{
    background: red;
  }

  .td-three{
    background-color: blue;
  }
</style>

Solution

You could use class binding as follows :

  <td :class="{'td-one':version.area1 == 'one'}">{{version.area1}}</td>

and so on

Answered By - Boussadjra Brahim