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

最新推荐文章于 2022-04-18 10:42:17 发布
最新推荐文章于 2022-04-18 10:42:17 发布
阅读量986 收藏
点赞数
文章标签： javascript jquery node.js html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloword_js/article/details/105263963
版权

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

看到这些问题脑袋疼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
渲染数据表格
weixin_49767935的博客
07-17 336
渲染数据表格 方法渲染 用js方法的配置完成渲染，无需写过多的HTML，在JS中指定原始元素，再设定各项参数即可。 方法渲染 其实是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了js代码中，且原始的table标签只需要一个选择器 2.基础参数一览表 Table模块所支持的全部参数一览表，对重点参数进行详细说明 Elem:String/DOM 指定原始table容器的选择器或DOM，方法渲染方式必填 Cols:Array设置表头，值是一个二维数组，方.
渲染字符串模板 【源代码】
小管打天下的博客
06-30 276
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_41740463的博客
08-24 559
动态的内容使用${}的格式书写. 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 705
面向开发人员的代码安全指南 该指南是腾讯开源的面向开发人员梳理的代码安全指南，旨在梳理API层面的风险点并提供详实可行的安全编码方案。基于DevSecOps理念，我们希望用开发者更易懂的方式阐述安全编码方案，引导从源头规避漏洞。 代码安全指引可用于以下场景： 开发人员日常参考 编写安全系统扫描策略 安全组件开发 漏洞修复指引 该安全指南包括C/C++安全指南、JavaScript安全指南、...
用ES6实现模板字符串渲染
weixin_46128020的博客
03-16 1936
ES6的发布，引起了一股热潮，那么今天我们一起来看看，用ES6来实现模板字符串的渲染吧。 注意 1.模板里肯定包含js，我们要对js代码进行特殊标记***<%js代码%>*** 2.HTML是字符串不需要包裹 3,对变量进行特殊标记***<%= 变量%>*** 我们先自己创建一个模板如下： <script type="text/html" id="template"&...
ES6中实现简单的字符串模板渲染（拼接插入字符串）
htcvive的博客
03-15 3478
字符串拼接方法 我们都知道，在ES5中字符串拼接方法比较繁琐。同一条字符串不能换行且要频繁用+拼接字符串。以拼接几个为例 ES5字符串拼接： for(var i = 0 ; i < 100 ; i ++){ html += '<li class="box">' +'<span>hello&lt...
Javascript 字符串模板的简单实现
11-22
为了解决这些问题，可以实现一个简单的字符串模板引擎，例如一个名为 `render` 的函数，它接受两个参数：`template`（模板字符串）和 `context`（上下文对象），将模板中的占位符替换为上下文对象中的对应值。...
tstemplate一个基于模板字符串的模板引擎的最简实现只适用于node环境
08-10
综上所述，tstemplate是一个基于JavaScript模板字符串的简单模板引擎，专为Node.js环境设计，适用于快速、轻量级的服务器端渲染需求。如果需要更复杂的功能或更广泛的应用场景，开发者可能需要寻找其他更成熟的模板...
vue模板字符串标签动态参数_Vue 1（基本用法｜模版语法｜常用特性）
weixin_30873127的博客
02-22 1763
1.Vue 概述 p437Vue：渐进式JavaScript框架官网声明式渲染 → 组件系统(组件化开发模式) → 客户端路由(单页面的局部更新、历史回退) → 集中式状态管理(vuex) → 项目构建易用：熟悉HTML、CSS、JavaScript知识后，可快速上手vue灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM2.Vue 基本使用 p4382.1 传统开发模...
关于v-show失效以及没有数据时渲染报错处理
qq_41430522的博客
03-17 1405
v-show不能使用在template上，不然失效，v-if可以 然后有时候你会发现，没有数据渲染会报错，啥cannot read 。。of undefined， 比如你再页面上写了{{result.row.name}} 但是你这次请求到的数据 压根没有row属性，只有个result空对象，如果你只是用result.row那就只显示个undefined，但是你还点一下name，那就会报错了，很常见的错误，啥cannot read 。。of undefined 关于这个错误，如果用的是v-if，其.
JS遍历循环渲染数据(模板字符串的应用)
王佳斌
08-11 8127
前言 通过原生JavaScript来渲染数据(假数据)，顺便应用一下ES6模板字符串特性。 Code 模拟的数据在data数组中挂载，当完成DOM加载时自动渲染data数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docu...
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...
模板字符串中动态循环渲染
记忆碎片
06-24 2016
模板字符串动态循环渲染 vue项目中碰到需要在模板字符串中动态渲染数组中的每一项，发现v-for不能正常渲染，于是使用原生的js语法来完成需求 ` <div> ${mapDatas.map((item) => { return `<div><span>${item.name}</span><span>${item.adress}</span></div>` }).join
Ajax 页面ajax渲染 js 模板字符串 使用 JS 实现sibling()
just_learing的博客
04-18 495
Ajax 页面ajax渲染 js 模板字符串 使用 JS 实现sibling()
JQuery.datatable —— 条件查询动态渲染Table
Genius only means hard-working all one's life.
05-22 1915
文章目录JQuery.datatable —— 条件查询动态渲染Table前言关键代码 JQuery.datatable —— 条件查询动态渲染Table 前言 通过页面条件，重新渲染表格内容。 关键代码 <!-- 定义动态表格 --> var initTable = $('#tableTestFindAll').DataTable({ "ajax": { url: "t...
jq拼接字符串渲染
jjsnc
09-03 3082
/** * Created by xuwei on 2016/9/29 0029. */ $(document).ready(function () { //加载公用导航 $("#header").load("../Commen/header.html"); $("#btnSearch").on("click", function () { Course_l
js-管理你的html字符串，并渲染简单的json数据
u011277123的博客
11-30 7089
web翎云阁 2016-11-29 11:48 在项目中，我们每当需要动态插入部分html的时候，都是在 js 里面拼接字符串。那样既不美观，又会让代码变得非常常，有时候我们又不需要用 handlebars 或者 xTemplate 这类的模板引擎。那怎么管理这些又长又难以排版的 html 呢？ 例如： var html = ''+ 'Hello'+ 'Worl
Es6模板字符串条件判断
King Saj
12-17 1347
// js 代码块 html = `<tr> <td data-id=${item.id} style="text-align: center; "> ${(function () { if (item.status == 4) { return `<span> <i class="iconfont icon-guaqi offHungOnclick" title="取消挂起"></i> &
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值