Vue.js 如何根据返回的值对元素进行渲染【使用switch】

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中的代码量,使代码可读性非常高。

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

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

发布了96 篇原创文章 · 获赞 228 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44296929/article/details/103872903