CODEWITHSUNDEEP
htmlcss
Inforage
Inforage

Reputation: 79

How to use if/else condition in html table td

I want to ask how can I doing if/else condition in this tag?

 <td data-label="Status">{{$t('Status'+item.cStatus)}}</td>

What I want is

if(item.cStatus == NW){
color:red
}
else{
color:blue
}

Upvotes: 2

Views: 5544

Answers (3)

Dhiraj Parakh
Dhiraj Parakh

Reputation: 11

You can use the alternative method below:

<td data-label="Status">
  {{$t('Status'+item.cStatus == NW ? 'red' : 'blue')}}
</td>

Upvotes: 1

Yogesh
Yogesh

Reputation: 725

Try with below code

<th:block th:if="${item.cStatus == 'NW'}">
<td data-label="Status" style="color:red;">{{$t('Status'+item.cStatus)}}</td>
</th:block>
<th:block th:unless="${item.cStatus == 'NW'}">
<td data-label="Status" style="color:blue;">{{$t('Status'+item.cStatus)}}</td>
</th:block>

Upvotes: 0

mrasadatik
mrasadatik

Reputation: 321

You can pass an object to :class (short for v-bind:class) to dynamically toggle classes:

<td :class="[item.cStatus == NW ? 'red' : 'blue']" data-label="Status">{{$t('Status'+item.cStatus)}}</td>

The above syntax means the presence of the red class will be determined by the truthiness of the data property item.cStatus == NW.

Then you can add your desired style to red or blue class

You can also do it by :style object

You can find more details here

Upvotes: 2

Related Questions