软件工程实践2022年春-F班
个人技术总结-vue框架下使用动态绑定进行界面渲染
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区目录
- 概述
- 技术详述
- 用类&数组进行动态绑定-不同颜色
- 函数进行动态绑定-不同图片
- 问题与解决
- 总结
- 参考文献
概述
渲染页面时，一些重复性模块带有自己属性或者特性，需要将这些特征模块渲染在页面上作为模块的信息之一，这些属性或者特性可能是一些图片（例如不同性别的男/女生头像），也可能是不同的颜色，用于区分不同的紧急程度或是优先级。使用动态绑定可以满足该需求。
技术详述
有两种实现动态绑定的方式
用类&数组进行动态绑定-不同颜色
前后端统一相关属性的参数格式，并且根据相应的紧急程度或是优先级将类名存放在数组中，在属性中动态渲染该模块的某特性所对应的类。
下为类的动态绑定部分代码，其中priority是该模块的优先级属性。
数组中按照顺序存放类名
用于不同属性的类
流程图：
当后端传回的参数不是连续整数或是没有约定好参数的含义时可以用函数进行动态绑定：
函数进行动态绑定-不同图片
动态绑定调用函数
在函数中进行相关判断需要渲染的图片
流程图：
问题与解决
一开始在动态绑定图片的时候，只返回了图片路径的字符串，无法正确渲染。经过查询发现可能是因为动态获取静态图片出现的问题，最后使用require(path)之后成功渲染。
总结
使用动态绑定渲染可以使用类或者是函数，只使用类可以很方便的根据参数渲染出不同等级的模块效果，但是需要约定好参数类型和值；使用函数可以很省去约定参数这一工作，比较灵活，但编码量相对于第一种更多。
参考文献
构建之法
相关推荐
michelleugwu.com:使用Vue更新了个人网站
michelleugwu.com:使用Vue更新了个人网站
Vue笔记个人课程.zip
我的初学VUE的笔记,里面关于vue的内容十分详细,对着案例写相信会有所提升
VueJS简介（VUE入门）
《VueJS简介》：VueJS入门级简介，Vue.js 是一款极简的 mvvm 框架，本文概述了VueJS及其思想，文中也列举了一些简单的例子
Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分 首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例： 源代码 html 文件： 请看注释 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/x
vue 动态绑定背景图片的方法
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
