处理vue项目中使用es6模板字符串中\n换行问题
- 在vue项目中, 我经常会遇到使用了模板字符串, 含有’\n’ , 需要换行
比如 :
html:
<v-col class="px-0 pb-1"><h3>{{ mes }}</h3>
</v-col>data:
mes: `This is a message \n This is a newline message`,
页面显示 :
- 发现即使使用 \n, 但是也并没有实现换行
- 但是其实通过css就可以实现
<v-col class="px-0 pb-1" style="white-space: pre-wrap;"><h3>{{ mes }}</h3></v-col>
页面显示 :
那么为什么呢?
看一下white-space属性
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示,取值有:
- normal:默认,忽略文本中所有的空白、换行符;只有文本存在
<br>
或文本达到框的约束时,文本才会换行 - nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行
- pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在
<br>
或文本中有换行符时,文本才会换行 - pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在
<br>
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行 - pre-line:会略文本中的空白符;文本存在
<br>
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
所以一个css 就搞定啦!
处理vue项目中使用es6模板字符串中\n换行问题相关推荐
- es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值 即 let a = 'Oh!' ...
- es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...
- es6 模板字符串中绑定事件的方法
step1: 模板字符传中写法 renderDom() {return `<div data-action="goDetail" data-url="${item. ...
- ES6 模板字符串 ``
参考原文链接 1. 使用JavaScript输出字符串,通常是下面这样的: console.log("He is <b>"+person.name+"< ...
- ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
- vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件 实现方式 实现原理 实现方式 要引入的文件放在public目录下,在index.html中通过script标签引入 实现原理 参考vue官网–处理静态资 ...
- 后端字段为null,前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空 未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
- ES6模板字符串的扩展
1.模板字符串的扩展 1.1传统的Jquery方法 <div class="content"></div><script>let name = ...
- 在模板字符串中条件判断和遍历
1.在模板字符串中遍历 ${item1.groupDetail.map((item2) => {return `<div id="check_name_box"> ...
- (js)模板字符串中使用循环遍历数据:
(js)模板字符串中使用循环遍历数据: // 数据格式 let wordList = {id: "2",question: "李四",content: [{ n ...
最新文章
- KaiOS 超越 iOS 成为印度第二大移动操作系统
- 【云炬大学生创业基础笔记】第1章第2节关于什么是创客的讨论
- java 文件读入 数组,将文本文件读入2d数组java
- miniGUI安装笔记(转)
- 从数组到流再到Java 8
- 如何在运行时更改日志记录级别
- mysql 存储过程求和_MySQL - 存储过程和函数
- c++ stl stack_C ++ STL中的stack :: push()函数
- SpringBoot 如何统一后端返回格式?老鸟们都是这样玩的!
- java中可以让实例改变了类Feild(java这么干就是一个错误,你看到了就当做是类在该修改或这个类Feild)...
- JavaScript高级程序设计(第4版)知识点总结
- 高德地图导航onInitNaviSuccess只调用一次
- 【python】教你使用seLeniun爬取淘宝商品数据(内含完整源码)
- 人工智能导论(3)——确定性推理(Certainty Reasoning)
- 随机生存森林的模型建立和结果解读
- BlueTeam 应急
- 打造完美写作系统:Gitbook+Github Pages+Github Actions
- Day14:网络编程入门
- vba 为excel排序
- Github项目文档的管理