vue框架下使用动态绑定进行界面渲染

已于 2022-06-26 22:25:00 修改
阅读量798 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-06-26 21:56:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52047718/article/details/125473882
版权
本文介绍在Vue.js框架下如何使用动态绑定来渲染界面，包括通过类&数组绑定不同颜色以及使用函数绑定不同图片。在遇到动态获取静态图片的问题时，通过require()解决了渲染问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

概述

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

技术详述

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

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

前后端统一相关属性的参数格式，并且根据相应的紧急程度或是优先级将类名存放在数组中，在属性中动态渲染该模块的某特性所对应的类。
下为类的动态绑定部分代码，其中priority是该模块的优先级属性。
在这里插入图片描述
数组中按照顺序存放类名
在这里插入图片描述
用于不同属性的类
在这里插入图片描述
流程图：
在这里插入图片描述

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

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

动态绑定调用函数
在这里插入图片描述
在函数中进行相关判断需要渲染的图片
在这里插入图片描述
流程图：
在这里插入图片描述

问题与解决

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

总结

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

参考文献

构建之法

vue2中如何动态渲染组件
JackZhouMine
06-09 2327
方法局限了在组件内部，我们可以将这个方法抽离出来，挂载到 Vue 原型上，就可以在全局调用。了解了如何通过函数调用渲染组件，可以封装一个二次确认弹窗， 用户确认后再进行下一步操作。了解了动态渲染组件的原理，我们可以通过函数调用的方式，动态地渲染组件。返回的是一个 Vue 的子类，而不是一个 Vue 的实例。既然可动态渲染一个组件，把这个过程封装成一个函数，可通过。函数传递一个回调函数，当用户点击确定时，执行回调函数。下面的代码，当用户点击按钮时，会动态渲染一个。上，这样就实现了App.vue 的渲染。
vue里面动态渲染图片?
qq_56491274的博客
03-02 1696
vue里面动态渲染图片
Vue(7) —— Vue组件讲解
Jzandth的博客
09-24 286
1.什么是组件 组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着殊途同归之妙；一般一个应用会以一棵嵌套的组件树的形式来组织： 我们可以简单的将组件理解为我们在HTML文件中使用的标签 2.怎么使用组件/怎么自定义组件 在定义中说了，组件是用来提高复用的，且组件的内容就是我们在HTML文件中使用的标签 使用语法 Vue.component("组件名称",{ templ
Vue动态渲染本地图片
无人之岛08的博客
01-14 3871
今天总结一下Vue动态渲染本地图片的一些问题~ 如果你直接使用本地图片地址，像下面这样 <div> <img src="../../images/icon_01.png"> </div> 这是可以正常显示图片的， 但是如果你想遍历渲染本地图片，直接引用图片地址是不行的，需要用require解析引入 <div class="box point" v-for="(item,index) in navList" :ke..
【Vue】首页 - 动态渲染
qq_39921135的博客
06-12 199
并且icon也支持图片链接。
基于Vue框架的施工前端设计源码
09-27
本项目以Vue框架为核心，构筑了一个施工行业的前端设计源码，共包含47个精心编写的文件，这些文件分为多个类别，涵盖了构建现代化前端界面所需的关键技术组件。 项目中，14个Vue组件是构成用户界面的基本单位，它们...
详解VUE Element-UI多级菜单动态渲染的组件
10-17
本文将详解介绍如何在使用Vue.js和Element-UI框架下实现多级菜单的动态渲染。 ### 多级菜单的概念 多级菜单是一种常见的用户界面组件，用于在导航栏或侧边栏中展示分级目录。它使得用户可以快速定位到所需的内容或...
vue动态渲染svg、添加点击事件的实现
10-15
在现代前端开发中，Vue.js 是一个流行且强大的JavaScript框架，它让我们能够以声明式的方式构建交互式的用户界面。而SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML格式定义图形的语言，广泛用于...
vue框架开发，如何在vue框架下编写代码介绍
最新发布
12-01
在Vue框架下编写代码，需要遵循一定的基本结构和原理，这包括安装Vue框架、创建Vue实例、定义模板、绑定数据、添加事件处理和使用组件等关键步骤。 首先，安装Vue框架可以通过多种方式进行，包括通过CDN引入Vue、...
vue中v-for通过动态绑定class实现触发效果
10-17
在Vue框架中，v-for是用于渲染列表的一个指令，它可以遍历数组或对象，并为每一个元素生成对应的HTML结构。动态绑定class是一种在Vue中动态地为元素添加或移除CSS类的技术，而v-for与动态绑定class结合使用时，可以...
Vue动态渲染组件（动态渲染两个柱状图组件）（包含柱状图渐变）
随便写写
08-12 1814
Vue动态渲染组件（动态渲染两个柱状图组件）（包含柱状图渐变）
Vue之动画渲染
唐昊
06-15 461
参考地址：点击 1. vue动画的理解 操作css的trasition或animation vue会给目标元素添加/移除特定的class 2. 基本过渡动画的编码 在目标元素外包裹 定义class样式 指定过渡样式: transition 指定隐藏时的样式: opacity/其它 3. 过渡的类名 xxx-enter-active: 指定显示的transition xxx-leave-active:指定隐藏的transition xxx-enter: 指定隐藏时的样式 <st
vue2，v-for中动态渲染本地的图片
weixin_62639453的博客
08-07 389
如果是正常在img标签的src上使用本地的url地址，是可以正常被渲染的，但是我们通过for的形式，动态渲染的话，就会通过网络请求的方式进行渲染，这个形式反而渲染不出来。加个require就行了，他这个会去请求你的图片资源，不过里面的路径还是得按照相对路径来，如果是绝对路径也是不行的。这样却不行，效果就是裂开了，我人也跟着裂开！从网络请求上来看，也是不成功的请求：304。这个效果，毋庸置疑是比较常用的，是可以的。
Vue的fetch的概述和使用
weixin_46415852的博客
03-02 1005
Fetch基本概念 Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能。 Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的...
vue中动态渲染静态图片资源
2301_79980806的博客
11-17 1142
在vue上，动态渲染静态图片资源（比如从assets文件夹加载的图片）需要注意打包工具对静态资源的解析方式。如果你的项目是通过vite创建的vue3项目的话，应该使用vite提供的静态资源载入方法。requie是webpack提供的一种加载能力，所以vite不能用require方法。，所以两者的底层打包工具不一样，相应的对静态资源的解析方式也不一样。如果路径是动态拼接的，可以直接在模板中拼接路径。使用webpack提供的静态资源路径解析。
vue如何动态渲染本地图片img
无知者无畏
09-01 3039
动态渲染本地图片 <div class="wrap_left" v-for="item of array" :key="item.id"> <img :src="item.img ? require(`../assets/image/${item.img}`) : ''" alt="image" /> </div> array: [ { id: 0, name: '小明', job:
自己解决在Vue中动态渲染图片不显示的问题
热门推荐
张浔CSDN
05-12 1万+
乐于助人前言分析思路1. 绝对路径2. 相对路径总结 本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题，心里路程比较多，所以话比较多哈哈，感谢阅读，大概耗时2分钟 前言 如上图所示，我的图片就是储存在了 assets/images/ 目录下 ，但是结果不显示，这个问题其实早就遇到了，当时查阅资料之后就解决了，大概原理也不是很深，解决的方式也并不复杂，所以就没有记录，但是今天写了一个小案例时，这个问题冒出来给我整郁闷了，我怀疑是不是自己记错了解决的方式了，我去查资料，并没有什么问题，最
Vue之如何动态渲染.vue文件
梦想成为全栈的切图仔
10-17 3709
动态渲染.vue文件其实存在于很多地方，例如近期做的表单设计器就是其中一个，生成vue代码后，应用在其它地方。要求下载完vue文件在其它项目中引入即可使用。那么动态渲染.vue项目如何去做呢？
1、vue可视化组件动态渲染（1）
girg520的博客
03-04 3229
vue编辑器可视化组件渲染原理
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值