鍍金池/ 問答/HTML/ Vue.js中文本為 待完成是一個(gè)顏色 已完成 是一種顏色 跳過 是一

Vue.js中文本為 待完成是一個(gè)顏色 已完成 是一種顏色 跳過 是一種顏色 ，文字不同顏色不同，請(qǐng)問怎么實(shí)現(xiàn)

Vue.js中文本為 待完成是一個(gè)顏色 已完成 是一種顏色 跳過 是一種顏色 ，文字不同顏色不同，請(qǐng)問怎么實(shí)現(xiàn)

clipboard.png

這個(gè)文字有三張顏色，

clipboard.png

文字不同怎么才能顏色也不同呢？

回答
編輯回答
莓森

Class 與 Style 綁定

<style>
.red{color: red}
.blue{color: blue}
.green{color: green}
.orange{color: orange}
<style>
<td :class="[x.itemName==="已完成"? 'red': '', x.itemName==="待完成"? 'blue': '',x.itemName==="執(zhí)行中"? 'green': '',{ orange: x.itemName==="已執(zhí)行"}]">{{x.itemName}}</td >
2018年2月2日 01:16