模板字符串通过条件渲染数据

最新推荐文章于 2022-08-30 21:19:37 发布
原创 最新推荐文章于 2022-08-30 21:19:37 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #jquery #node.js #html #css3

本文介绍如何根据is_refund和request_status变量的值进行模板字符串的条件渲染，详细解析了1已退款-1未退款及1已发货-1未发货2发货失败等状态的处理方式。

模板字符串通过条件进行渲染
首先我们来看看获取到的数据：
在这里插入图片描述
我们将通过is_refund和request_staus的状态进行渲染，先看看后端要求的条件
is_refund：1已退款 -1未退款；request_staus： 1已发货 -1未发货 2发货失败
有了以下代码：
在这里插入图片描述
我们来看看效果
在这里插入图片描述

Java 21 字符串模板预览：告别繁琐的字符串拼接
Java大师兄的博客
06-15 854
传统字符串拼接的痛点字符串模板的核心概念（STR/FMT）具体使用方法与代码示例相比传统方式的优势实际项目中的应用场景本文将从「传统拼接的烦恼」引入，用生活化案例解释字符串模板的核心设计，通过代码对比展示其优势，最后结合实战场景说明如何落地使用。STR原始模板：直接拼接动态内容，语法STR."\{表达式}"。FMT格式化模板：对动态内容格式化，语法FMT."\{表达式:格式}"。模板表达式\{...\}内可以写变量、方法调用、三目运算等。
JS遍历循环渲染数据(模板字符串的应用)
🏆 前端领域优质创作者
08-11 8346
前言 通过原生JavaScript来渲染数据(假数据)，顺便应用一下ES6模板字符串特性。 Code 模拟的数据在data数组中挂载，当完成DOM加载时自动渲染data数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docu...
渲染字符串模板 【源代码】
小管打天下的博客
06-30 333
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
渲染数据表格
weixin_49767935的博客
07-17 406
渲染数据表格 方法渲染 用js方法的配置完成渲染，无需写过多的HTML，在JS中指定原始元素，再设定各项参数即可。 方法渲染 其实是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了js代码中，且原始的table标签只需要一个选择器 2.基础参数一览表 Table模块所支持的全部参数一览表，对重点参数进行详细说明 Elem:String/DOM 指定原始table容器的选择器或DOM，方法渲染方式必填 Cols:Array设置表头，值是一个二维数组，方.
动态创建表格(使用模板字符串)
weixin_41740463的博客
08-24 635
动态的内容使用${}的格式书写. function setTable(){ for(let i = 0; i<arr.length ; i++){ const obj = arr[i] const str = ` <tr> <td>${obj.name}</td> <td>${obj.age}</td> <td>${obj.gender}</td> <td class = "del" ind
面向开发人员的代码安全指南
不断学习，不断进步，提高自己
01-04 933
面向开发人员的代码安全指南 该指南是腾讯开源的面向开发人员梳理的代码安全指南，旨在梳理API层面的风险点并提供详实可行的安全编码方案。基于DevSecOps理念，我们希望用开发者更易懂的方式阐述安全编码方案，引导从源头规避漏洞。 代码安全指引可用于以下场景： 开发人员日常参考 编写安全系统扫描策略 安全组件开发 漏洞修复指引 该安全指南包括C/C++安全指南、JavaScript安全指南、...
知识点6--条件渲染与列表渲染
别人笑我太疯癫，我笑他人看不穿。
07-07 713
条件渲染其实就是前端的条件判断，早先的jsp标签库提供过if的标签，vue也同样有这样的功能，不同的是，vue是使用模板指令完成的 效果如下 在前端指的是，是地址对比，是赋值，不要再这一点上疑惑，vue它本身也是原生js封装来的，jquery能用的东西vue一般也是通用的，不要以为vue超然世外了除了if渲染之外，条件渲染还提供了渲染，它的作用是直接决定一个标签元素是否被展示，这一点可以直接实现，不过这里还是说一下大家要知道有这么一个模板指令是专门用来完成是否渲染的 效果如下 这里说一下在是否渲染上用和
Javascript 字符串模板的简单实现
11-22
为了解决这些问题，可以实现一个简单的字符串模板引擎，例如一个名为 `render` 的函数，它接受两个参数：`template`（模板字符串）和 `context`（上下文对象），将模板中的占位符替换为上下文对象中的对应值。...
tstemplate一个基于模板字符串的模板引擎的最简实现只适用于node环境
08-10
综上所述，tstemplate是一个基于JavaScript模板字符串的简单模板引擎，专为Node.js环境设计，适用于快速、轻量级的服务器端渲染需求。如果需要更复杂的功能或更广泛的应用场景，开发者可能需要寻找其他更成熟的模板...
Vue源码探索--mustache模板引擎（把模板字符串编译为虚拟DOM并渲染出真实DOM）上篇
果车的博客
01-27 683
注：上一基础篇我们了解到什么是模板引擎以及如何使用，这一篇我们通过尝试写一些底层源码来深入理解其工作流程（把模板字符串编译为虚拟DOM并渲染出真实DOM）。 一、正则实现简单模板数据填充： 最简单模板引擎实现机理，利用的是正则表达式中的replace()方法： <div id="container"> </div> </body> <script src="../js/mustache.js"></script> <script&g
runty：实现高效条件字符串渲染的微模板引擎
这是通过创建runty解析器实例，然后将模板字符串传递给该实例来实现的。解析器会返回一个函数，该函数接受数据作为参数，并渲染出最终的字符串结果。 总之，runty提供了强大的模板功能，特别适合需要动态内容生成的...
关于v-show失效以及没有数据时渲染报错处理
qq_41430522的博客
03-17 1534
v-show不能使用在template上，不然失效，v-if可以 然后有时候你会发现，没有数据渲染会报错，啥cannot read 。。of undefined， 比如你再页面上写了{{result.row.name}} 但是你这次请求到的数据 压根没有row属性，只有个result空对象，如果你只是用result.row那就只显示个undefined，但是你还点一下name，那就会报错了，很常见的错误，啥cannot read 。。of undefined 关于这个错误，如果用的是v-if，其.
JQuery.datatable —— 条件查询动态渲染Table
Genius only means hard-working all one's life.
05-22 2035
文章目录JQuery.datatable —— 条件查询动态渲染Table前言关键代码 JQuery.datatable —— 条件查询动态渲染Table 前言 通过页面条件，重新渲染表格内容。 关键代码 <!-- 定义动态表格 --> var initTable = $('#tableTestFindAll').DataTable({ "ajax": { url: "t...
用ES6实现模板字符串渲染
weixin_46128020的博客
03-16 2046
ES6的发布，引起了一股热潮，那么今天我们一起来看看，用ES6来实现模板字符串的渲染吧。 注意 1.模板里肯定包含js，我们要对js代码进行特殊标记***<%js代码%>*** 2.HTML是字符串不需要包裹 3,对变量进行特殊标记***<%= 变量%>*** 我们先自己创建一个模板如下： <script type="text/html" id="template"&...
使用jQuery渲染数据的小例子
u010032977的专栏
04-16 2296
现在应该很少有人使用jQuery了吧！为了回顾以前使用jQuery的经历，现在特意做了一个使用Ajax渲染数据的小例子。
方法和事件绑定、条件渲染、循环渲染、样式绑定、一些面试题整理
qq_46479336的博客
08-30 327
核心是关注视图层，解决数据绑定的问题。核心思想数据驱动：视图内容根据数据的改变而改变组件化：增加代码复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚，低耦合。个人理解由于vue是基于MVVM思想的双向绑定，让我们可以减少对dom元素的频繁操作，直接在数据层和视图层建立一种联系，方便使用。并且它通过组件化的方式，增加了代码的可复用性，可维护性，提高了开发效率。...
模板字符串中动态循环渲染
记忆碎片
06-24 2158
模板字符串动态循环渲染 vue项目中碰到需要在模板字符串中动态渲染数组中的每一项，发现v-for不能正常渲染，于是使用原生的js语法来完成需求 ` <div> ${mapDatas.map((item) => { return `<div><span>${item.name}</span><span>${item.adress}</span></div>` }).join
JS模板字符串的简单实现
热门推荐
许保殿的博客
03-17 1万+
假设有字符串和对象如下 let templateStr = 'i am {{name}},age {{age}},job {{job}} '; let data = { name:'xbd', age:18, job:'CTO' } 设计函数templateFunc(str,data)，函数处理后的结果为 console.log(templateFunc(st...
JS模板实现：简化DOM渲染与数据绑定
1. **字符串替换** - 这是最基础的模板实现，通过`substitute`函数，该函数接受一个模板字符串和一个包含数据的对象，以及可选的正则表达式用于匹配数据占位符。例如，给定模板`&#39;{text}</label><input type="text" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值