js 动态渲染元素的样式

最新推荐文章于 2024-07-11 16:50:01 发布

WallingDown

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量835

点赞数

分类专栏： vue js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43994760/article/details/124317460

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

一、场景：

在UI设计图中，可能会出现页面中多个尺寸大小一致的元素、显示不同样式的情况：
在这里插入图片描述
由图中可见，边框中的每个颜色都不一致

二、思路：

文件中可以维护一组Map集合的数据对照。当接口返回所有元素之后，将元素一个个循环遍历，紧接着在遍历的过程中将Map数据与之对应的元素进行样式的依次渲染。

三、代码实现：

data(){
	return {
		dataBorderSet:{
			'Demo1':'#93948f',
			'Demo2':'#92948f',
			'Demo3':'#8f948f',
			'Demo4':'#928f94'
		}
	}
},
onLoad(){
	this.init();
},
init(){
	let { isSuc, data } = await new this.$ajax({
         path: "getAllData",
         data: {
            请求参数
         },
         method: "GET"
         }).catch(e => e);
         if(isSuc){
			this.dataList = data.dataList // 获取的接口数据
			this.dataList.forEach((v, i)=>{ // v-每一项数据 i-元素对应下标
				// 在这里做元素样式的渲染
				// 匹配每个元素的边框颜色
              Object.keys(this.dataBorderSet).forEach(k => {
                if (k === v.name) { // 当Set对照表中的key与接口数据中元素的名称(Demo)相同
                  v.bordercolorOfElement = this.dataBorderSet[k]; // 将Set对照表中key对应的value值匹配给接口数据中的bordercolorOfElement变量
                }
              });
			})
		 }

}