当前位置: 首页 > news >正文

vue使用v-html保留原内容的缩进和换行

在vue中v-html是一个非常有用的工具,比如从后端读取日志,就这么搞

<div class="context" ref="cnt_log" v-html="logdata"></div>

然后一个触发函数,返回logdata的数据即可。不过这个时候,估计会发现,怎么返回到页面的格式不对劲啊,全挤成了一坨,没有换行,也没有原有的缩进,比如
在这里插入图片描述
其实一招就解决了,无需后端特殊处理比如行尾都加上<br>啥的,只要给div加个样式即可

.context {word-break: normal;		#自动换行 width: auto; height: 700px;white-space:pre-wrap;     #保留原内容的换行和缩进word-wrap : break-word ;overflow: scroll;         #溢出的内容显示为滚动条,而不是溢出页面background-color: black;color: #83fcf5;           #字体颜色padding: 15px;
}

然后就正常了,看着简单,我也是折腾了很久呢
在这里插入图片描述

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • HTML静态网页成品作业(HTML+CSS)——家乡广州介绍设计制作(5个页面)
  • 23.合并K个升序链表-----力扣
  • 多元统计分析——基于R语言的单车使用情况可视化分析
  • C语言贪吃蛇之BUG满天飞
  • 提交试卷+智能生成评价
  • wpf DataTemplate 和 ControlTemplate 区别,应用举例
  • iPhone13手机照片被误删,有什么方法可以恢复吗?
  • 基于ssm+vue+uniapp的跑腿平台小程序
  • Java之迭代器的使用
  • Qt QTableWidgetItem.setFlags()
  • [M双指针] lc209. 长度最小的子数组(双指针+好题)
  • 开发一个免费的图表网站 Free Charts
  • 《机器学习》—— AUC评估指标
  • 多线程中常见问题
  • 《第二十四章 多线程与异步任务 - AsyncTask 异步任务》
  • DataBase in Android
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • extract-text-webpack-plugin用法
  • JS字符串转数字方法总结
  • MobX
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • Redis提升并发能力 | 从0开始构建SpringCloud微服务(2)
  • Shell编程
  • Spring Boot MyBatis配置多种数据库
  • v-if和v-for连用出现的问题
  • webgl (原生)基础入门指南【一】
  • 基于web的全景—— Pannellum小试
  • 记一次用 NodeJs 实现模拟登录的思路
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 手写双向链表LinkedList的几个常用功能
  • kubernetes资源对象--ingress
  • Prometheus VS InfluxDB
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • ‌前端列表展示1000条大量数据时,后端通常需要进行一定的处理。‌
  • # include “ “ 和 # include < >两者的区别
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • #Linux(make工具和makefile文件以及makefile语法)
  • $.ajax()方法详解
  • (02)Hive SQL编译成MapReduce任务的过程
  • (152)时序收敛--->(02)时序收敛二
  • (第三期)书生大模型实战营——InternVL(冷笑话大师)部署微调实践
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (二)Kafka离线安装 - Zookeeper下载及安装
  • (分布式缓存)Redis分片集群
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (每日持续更新)jdk api之FileReader基础、应用、实战
  • (三)SvelteKit教程:layout 文件
  • (详细文档!)javaswing图书管理系统+mysql数据库
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • ***监测系统的构建(chkrootkit )
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)