lodash _.template()方法的使用

news2024/7/2 3:54:25

背景:

使用_.template()生成对应数据的对应html代码

核心代码:

        //定义一个变量来装finalHtml 
        var finalHtml = ''       
        //1.模版        
        compiled = _.template(
        [
          '<span class="${clazz}" index="${index}"             
            style="background:${bgColor};color:${color};position:relative;"',
          ' fontcolor="${color}"  bgcolor="${bgColor}">',
          '${title}',
          '</span>',
        ].join('')
        )
      var para = {
        clazz: ['class1', 'class2'].join(' '),
        index: index,
        bgColor: bgColor,
        color: color,
        title: title,
        i18n_text: i18n_text
      }
      //拼接
      finalHtml += compiled(para)

其它,数据形式如下:


        { 
          index:0,
          title: '1年内',
          minVal:0,
          maxVal:1,
          color: '#000',
          bgColor:'rgba(1,255,1,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_0Year',
        },
        { 
          index:3,
          title: '1~2年',
          minVal:1,
          maxVal:2,
          color: '#000',
          bgColor: 'rgba(255,255,0,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_1Year',
        },
        { 
          index:2,
          title: '2~3年',
          minVal:2,
          maxVal:3,
          color: '#000',
          bgColor: 'rgba(255,192,0,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_2Year',
        },
        { 
          index:1,
          title: '3年以上',
          minVal:3,
          maxVal:100,
          color: '#fff',
          bgColor: 'rgba(214,20,21,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_3Year',
        },

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1877628.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jmeter性能场景设计

为什么会有性能场景设计呢&#xff1f; 相信有部分同学对场景设计优点模糊&#xff0c;前面博文提到的是场景提取 场景设计&#xff1a;在压测的过程中怎么设置线程数、Ramp-Up时间(秒)、循环次数等等 一、 性能场景分类 场景的概念&#xff1a; a. 单场景 b. 混合场景 c. 容…

ArtTS语言基础类库内容的学习(2.10.1)

上篇回顾&#xff1a; ArkTS开发系列之Web组件的学习&#xff08;2.9&#xff09; 本篇内容&#xff1a;ArtTS语言基础类库-异步同步并发内容的学习(2.10.1&#xff09; 一、知识储备 1. 异常并发 Promise和Async/await提供异步并发能力&#xff0c;是标准的JS异步语法 Pr…

kicad第三方插件安装问题

在使用KICAD时想安装扩展内容&#xff0c;但是遇到下载失败&#xff0c;因为SSL connect error。 因为是公司网络&#xff0c;我也不是很懂&#xff0c;只能另寻他法。找到如下方法可以曲线救国。 第三方插件包目录 打开存放第三方插件存放目录&#xff0c;用于存放下载插件包…

什么是中断?---STM32篇

目录 一&#xff0c;中断的概念 二&#xff0c;中断的意义 三&#xff0c;中断的优先级 四&#xff0c;中断的嵌套 如果一个高优先级的中断发生&#xff0c;它会立即打断当前正在处理的中断&#xff08;如果其优先级较低&#xff09;&#xff0c;并首先处理这个高优…

AGPT•intelligence:带你领略全新量化交易的风采

随着金融科技的快速发展&#xff0c;量化交易已经成为了投资领域的热门话题。越来越多的投资者开始关注和使用量化交易软件来进行投资决策。在市场上有许多量化交易软件可供选择。 Delaek&#xff0c;是一位资深的金融科技专家&#xff0c;在 2020年成立一家专注于数字资产量化…

【全球首个开源AI数字人】DUIX数字人-打造你的AI伴侣!

目录 1. 引言1.1 数字人技术的发展背景1.2 DUIX数字人项目的开源意义1.3 DUIX数字人技术的独特价值1.4 本文目的与结构 2. DUIX数字人概述2.1 定义与核心概念2.2 硅基智能与DUIX的关系2.3 技术架构2.4 开源优势2.5 应用场景2.6 安全与合规性 3. DUIX数字人技术特点3.1 开源性与…

[OtterCTF 2018]Bit 4 Bit

我们已经发现这个恶意软件是一个勒索软件。查找攻击者的比特币地址。** 勒索软件总喜欢把勒索标志丢在显眼的地方&#xff0c;所以搜索桌面的记录 volatility.exe -f .\OtterCTF.vmem --profileWin7SP1x64 filescan | Select-String “Desktop” 0x000000007d660500 2 0 -W-r-…

Java新手启航:Windows下JDK安装,开启编程之旅

你是不是对编程充满好奇&#xff0c;想要迈入Java的世界&#xff0c;却不知道从何开始&#xff1f;别担心&#xff0c;每一个Java大师都是从安装JDK开始的&#xff0c;而今天&#xff0c;我将手把手教你如何轻松完成JDK的安装&#xff0c;让你迈出编程之旅的第一步! 接下来&am…

[Cloud Networking] BGP

1. AS (Autonomous System) 由于互联网规模庞大&#xff0c;所以网络会被分为许多 自治系统&#xff08;AS-Autonomous system&#xff09;。 所属类型ASN名称IPv4 数量IPv6数量运营商ISPAS3356LEVEL3 - Level 3 Parent, LLC, US29,798,83273,301,954,048互联网企业AS15169GO…

vue组件全局注册

描述&#xff1a; vue组件的注册分为局部和全局注册两部分&#xff0c;局部注册相对容易&#xff0c;不做赘述&#xff1b;而不同框架的注册方法又有所不同&#xff0c;下面针对vite框架和vue-cli框架的注册分别进行说明 vue组件全局注册 一、vite框架中全局组件注册二、Vue-cl…

AI复活亲人市场分析:技术、成本与伦理挑战

“起死回生”这种事&#xff0c;过去只存在于科幻电影里&#xff0c;但今年&#xff0c;被“复活”的案例却越来越多。 2月底&#xff0c;知名音乐人包晓柏利用AI“复活”了她的女儿&#xff0c;让她在妈妈生日时唱了一首生日歌&#xff1b;3月初&#xff0c;商汤科技的年会上…

ComfyUI汉化插件安装

步骤一&#xff1a;点击Manager 步骤二&#xff1a;选择安装插件 步骤三&#xff1a;搜索Translation&#xff0c;选择第一个点击右边得安装 步骤四&#xff1a;点击下放得RESTART进行重启 步骤五&#xff1a;等待重启完成后&#xff0c;点击设置 步骤六&#xff1a;选择中文语…

day02-Spark集群及参数

一、Spark运行环境变量问题(了解) 1-pycharm远程开发运行时&#xff0c;执行的是服务器的代码 2-通过本地传递指令到远程服务器运行代码时&#xff0c;会加载对应环境变量数据&#xff0c;加载环境变量文件是用户目录下的.bashrc文件 在/etc/bashrc 1-1 在代码中添加 使用os模块…

[方法] Unity 3D模型与骨骼动画

1. 在软件中导出3D模型 1.1 3dsmax 2014 1.1.1 TGA转PNG 3dsmax的贴图格式为tga&#xff0c;我们需要在在线格式转换中将其转换为Unity可识别的png格式。 1.1.2 模型导出 导出文件格式为fbx。在导出设置中&#xff0c;要勾选三角算法&#xff0c;取消勾选摄像机和灯光&#…

海康车牌识别 报警回调后程序崩溃

我用的32位 6.1.9版本SDK 回调会导致程序崩溃 咨询了下海康官方技术 答复如下&#xff1a;&#xff08;此答复我没尝试 自行尝试 我的解决方法是更换了老版本 5.3版本 没什么问题 个人资源中有 自行下载

grpc学习golang版( 四、多服务示例 )

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 第七章 客户端流式传输 第八章 双向流示例 文章目录 一、前言二、定义proto文件三、编写server服务端四、编写Client客…

【漏洞复现】安美数字酒店宽带运营系统——命令执行漏洞(CNVD-2021-37784)

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 安美数字酒店宽带运营系统 server_ping.php 存在远程命令执行漏洞&#…

3.3V到5V的负电源产生电路(电荷泵电压反相器)SGM3204输出电流0.2A封装SOT23-6

前言 SGM3204 非稳压 200mA 电荷泵负电源产生电路&#xff0c;LCEDA原理图请访问资源 SGM3204电荷泵负电源产生电路 SGM3204电荷泵负电源产生电路 一般描述 SGM3204从 1.4V 至 5.5V 的输入电压范围产生非稳压负输出电压。 该器件通常由 5V 或 3.3V 的预稳压电源轨供电。由于…

OpenGL3.3_C++_Windows(19)

Demo演示 1 几何着色器 几何Geometry glsl 发生在什么阶段&#xff1f; 图形渲染管线&#xff1a; 顶点数据——顶点着色器阶段——图元装配;&#xff08;Geometry glsl &#xff09;——光栅化阶段——裁切——片段着色器——测试和混合可选的Geometry几何着色器&#xff08;…

龙芯久久派到手开机测试

今天刚拿到龙芯久久派&#xff0c;没看到文档&#xff0c;只有视频&#xff0c;我来写个博客&#xff0c;做个记录&#xff0c;免得以后忘记 1.连接usb转ttl串口与龙芯久久派&#xff0c;如图所示。 2.将usb转串口接到电脑USB口 也就是这个接电脑上 3.打开串口调试助手或Secu…