Vue.js中文本为 待完成是一个颜色 已完成 是一种颜色 跳过 是一种颜色 ，文字不同颜色不同，请问怎么实现

Question

Vue.js中文本为 待完成是一个颜色 已完成 是一种颜色 跳过 是一种颜色 ，文字不同颜色不同，请问怎么实现

这个文字有三张颜色，

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

Answer 1

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==="执行中"? 'green': '',{ orange: x.itemName==="已执行"}]">{{x.itemName}}</td >