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
}
-
Specify the language pleasemrasadatik– mrasadatik2022-08-27 04:12:20 +00:00Commented Aug 27, 2022 at 4:12
-
And also tell, what exactly you want to domrasadatik– mrasadatik2022-08-27 04:15:42 +00:00Commented Aug 27, 2022 at 4:15
-
I have reference for you, may it helps :) stackoverflow.com/questions/502431/…rizaldodo– rizaldodo2022-08-27 04:17:12 +00:00Commented Aug 27, 2022 at 4:17
-
I am using vue typescript, I want to show if the data is 'NW' then the <td> will become color red. else the <td> will become blue. @AsaduzzamanAtik thanksInforage– Inforage2022-08-27 04:18:06 +00:00Commented Aug 27, 2022 at 4:18
-
Tryout my answermrasadatik– mrasadatik2022-08-27 04:34:52 +00:00Commented Aug 27, 2022 at 4:34
Add a comment
|
3 Answers
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
2 Comments
Inforage
Cool, it's worked well. the text color changed, can the class also changed the background-color also?
mrasadatik
Yes, you can!...
You can use the alternative method below:
<td data-label="Status">
{{$t('Status'+item.cStatus == NW ? 'red' : 'blue')}}
</td>
Comments
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>
