Vuejs add conditional style formatting

Question

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>

tony19 · Accepted Answer · 2022-07-16 01:56:03Z

1

You could use class binding as follows :

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

and so on

edited Jul 16, 2022 at 1:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 5, 2019 at 10:34

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaron Over a year ago

Thanks - it needed a slight adjustment, but has worked well <td :class="{'td-one':version.area1 == 'one'}">{{version.area1}}</td>

Boussadjra Brahim Over a year ago

you're welcome i fixed it please try to accept it it it' heplful

Collectives™ on Stack Overflow

Vuejs add conditional style formatting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related