当前位置:网站首页>js \n\r 换行失败 :【white-space: pre-line;】${} Template Literals
js \n\r 换行失败 :【white-space: pre-line;】${} Template Literals
2022-08-03 13:06:00 【刀枪不入de王二花】
问题:
js 文字换行失败
confirm_dialog({
title : '確認',
message : '以下XXを行います。\n\r \n \r <br>'+ ' ID:'+ row.id,
yes_cb : function(){
update(row);
},
no_cb : null,
});
実施結果:/n ⇒空格, 作为字符串直接打印出来了
確認
以下XXを行います。 <br> ID:123
方案:
1,\n\r 有効:white-space: pre-line;
2, 有効:&{}
1,CSS様式:white-space: pre-line;
css定义追加
.pre-line{
white-space: pre-line;
}
confirm_dialog message定义部分:追加 class
<p class='pre-line'>{{message}}</p>
2,使用 Template Literals(テンプレートリテラル)${}
<p>${context.message}</p>
Template Literals:拼接字符串,包括变量,表达式,html templete
Interpolation 插值
Template literals provide an easy way to interpolate variables and expressions into strings.
The method is called string interpolation.
Template Literals is an ES6 feature (JavaScript 2015).It is supported in all modern browsers.
The syntax is:
${...}
例:
// Variable Substitutions 变量置换
let firstName = "John";
let text = `Welcome ${firstName}, ${lastName}!`;
let text = `He's often called "Johnny"`; //Back-Tics Syntax, Quotes Inside Strings
let text = //Multiline Strings
`multiline
Strings`;
// Expression Substitution 表达式
let total = `Total: ${(price * (1 + rate)).toFixed(2)}`;
// HTML Templates
let html = `<h2>${header}</h2>`;
补充:
边栏推荐
- HCIP第十五天笔记(企业网的三层架构、VLAN以及VLAN 的配置)
- How to disable software from running in the background in Windows 11?How to prevent apps from running in the background in Windows 11
- 飞桨开源社区季度报告来啦,你想知道的都在这里
- 【深度学习】高效轻量级语义分割综述
- Nanoprobes 金纳米颗粒标记试剂丨1.4 nm Nanogold 标记试剂
- Golang 接口 interface
- Golang dictionary map
- 第07章 InnoDB数据存储结构【2.索引及调优篇】【MySQL高级】
- When Nodejs installation depends on cpnm, the install shows Error: Cannot find module 'fs/promises'
- 厨卫电器行业数字化集采管理系统:优化产业供应结构,实现采购业务流程集中管控
猜你喜欢
Nanoprobes 金纳米颗粒标记试剂丨1.4 nm Nanogold 标记试剂
Postman插件下载
Nanoprobes FluoroNanogold 偶联物的特色和应用
【深度学习】高效轻量级语义分割综述
[Blue Bridge Cup Trial Question 48] Scratch Dance Machine Game Children's Programming Scratch Blue Bridge Cup Trial Question Explanation
scala安装包
An introduction to 3D tools
Classes and objects (upper)
An工具介绍之3D工具
Nature, Cell都在用的Relia Tech 抗原亲和纯化LYVE1抗体
随机推荐
使用百度EasyDL实现施工人员安全装备检测
PyTorch框架训练线性回归模型(CPU与GPU环境)
Insert or Merge
How to make the history record time-stamped before
An动画优化之补间形状与传统补间的优化
How to disable software from running in the background in Windows 11?How to prevent apps from running in the background in Windows 11
OpenCV perspective transform
Golang 结构体&方法
ECCV 2022 | AirDet: 无需微调的小样本目标检测方法
An工具介绍之摄像头
【深度学习】高效轻量级语义分割综述
PyTorch builds a neural network to predict temperature (dataset comparison, CPU vs GPU comparison)
标题 node第一个服务器程序
欧曼自动挡、银河大马力、行星新产品 欧曼全新产品以燎原之势赢领市场
OpenCV 透视变换
Multithreading in Redis 6
Real number rounding and writing to file (C language file)
GameFi industry down but not out | June Report
An introduction to 3D tools
Classes and Objects (lower middle)