个人技术总结-vue框架下使用动态绑定进行界面渲染

221900339_张昀 学生 2022-06-26 22:28:41

目录

  • 概述
  • 技术详述
  • 用类&数组进行动态绑定-不同颜色
  • 函数进行动态绑定-不同图片
  • 问题与解决
  • 总结
  • 参考文献

概述

渲染页面时,一些重复性模块带有自己属性或者特性,需要将这些特征模块渲染在页面上作为模块的信息之一,这些属性或者特性可能是一些图片(例如不同性别的男/女生头像),也可能是不同的颜色,用于区分不同的紧急程度或是优先级。使用动态绑定可以满足该需求。

在这里插入图片描述


在这里插入图片描述

技术详述

有两种实现动态绑定的方式

用类&数组进行动态绑定-不同颜色

前后端统一相关属性的参数格式,并且根据相应的紧急程度或是优先级将类名存放在数组中,在属性中动态渲染该模块的某特性所对应的类。
下为类的动态绑定部分代码,其中priority是该模块的优先级属性。

在这里插入图片描述


数组中按照顺序存放类名

在这里插入图片描述


用于不同属性的类

在这里插入图片描述


流程图:

在这里插入图片描述

当后端传回的参数不是连续整数或是没有约定好参数的含义时可以用函数进行动态绑定:

函数进行动态绑定-不同图片

动态绑定调用函数

在这里插入图片描述


在函数中进行相关判断需要渲染的图片

在这里插入图片描述


流程图:

在这里插入图片描述

问题与解决

一开始在动态绑定图片的时候,只返回了图片路径的字符串,无法正确渲染。经过查询发现可能是因为动态获取静态图片出现的问题,最后使用require(path)之后成功渲染。

总结

使用动态绑定渲染可以使用类或者是函数,只使用类可以很方便的根据参数渲染出不同等级的模块效果,但是需要约定好参数类型和值;使用函数可以很省去约定参数这一工作,比较灵活,但编码量相对于第一种更多。

参考文献

构建之法

...全文
93 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
软件工程实践2022年春-F班

103

社区成员

福州大学-计算机与大数据学院-傅明建
软件工程 高校
社区管理员
  • Mingjian_Fu
  • Lyu-
  • Wake_lie
加入社区
帖子事件
创建了帖子
2022-06-26 22:28
社区公告

本次作业截止时间为2022-02-18 23:59:59,请未完成的同学抓紧时间,加入社区后的同学要按照“学号-姓名”的格式修改社区昵称。