Vue如何根据返回的值对元素进行样式渲染：

1、我们通常情况下如果想根据后台获取到的值动态的对元素进行渲染，我们通常使用v-for循环，然后使用v-if进行判断，根据判断的结果再根据:class进行不同的样式绑定，从而实现动态的渲染HTML元素，或是直接使用:class和三元表达式结合使用来进行判断实现动态样式的渲染，上面的方法针对少量的html元素还是非常方便的，但是一旦数据量特别的多，就需要我们重复写很多html代码或使用v-if进行很多重复的判断，这样会使代码的可读性变得很差，而下面这种方法既可以很好地动态渲染html元素，又可以对大量数据保持很好地代码可读性。

2、案例：参考文章

1）最终显示样式：

需求：根据任务状态值，显示不同颜色，圆点表示任务状态，以及对优先级的出局进行☆标记。

2）代码实现：

在<el-table-column>中需要显示的内容前面，添加图标元素，并添加对应的class样式。

其中，addclassStatus以及addclassPriority两个方法是自己定义的计算，根据属性值计算class样式的方法。

3）在vue中的 export default 中的methods中进addclassStatus以及addclassPriority方法的计算和赋值。

4）在css文件中定义css样式。

总结：其实上面代码的核心部分就是第一步中我们通过在:class后调用一个addclassStatus的方法，然后通过传入我们获取的动态taskStatus值，在addclassStatus方法中进行判断验证返回不同的class属性，从而实现动态的渲染。而正是因为我们第三步中使用了switch所以可以将判断写在方法中，简化了html中的代码量，使代码可读性非常高。

你要去做一个大人，不要回头，不要难过。

“新朋友不知道旧脾气，老朋友不知道新生活。”