首页 > 其他分享 >Vue项目,用模板语法{{}}插值渲染文本,文本不能换行的坑

Vue项目,用模板语法{{}}插值渲染文本,文本不能换行的坑

时间:2024-03-24 14:12:13浏览次数:20  
标签:pre Vue 渲染 插值 contentTitle 换行 文本 模板

{{contentTitle}}

data() {
  return {
    contentTitle: 第一行     第二行,
  }
},

contentTitle这个变量赋的值是,ES6的字符模板
根据说明,在这个字符模板内换行,会直接输出换行,不需要添加什么\n,
这类东西。

但渲染出来的文本根本没有换行,是这样的:
第一行 第二行
(换行符显示为一个空格)

之后查了一下资料说是要用,v-html进行数据的渲染

但事实是,依然无效

最后看了这个博文
https://www.cnblogs.com/leegent/p/9274424.html

使用了CCS的属性:white-space
将p容器的white-space属性设置为pre-wrap即可解决问题。

查看了一下这个属性发现是:规定段落中的文本换行
那么之前换行变为空格,这时设置为pre就没问题了
(pre:空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。)

标签:pre,Vue,渲染,插值,contentTitle,换行,文本,模板
From: https://www.cnblogs.com/lambertlt/p/18092368

相关文章

  • 【附源码】java松江大学城就餐推荐系统设计与实现(ssm毕业设计+maven+vue+计算机专业)
    本系统(程序+源码)带文档lw万字以上  文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义选题背景:在现代都市的快节奏生活中,餐饮服务已经成为人们日常生活中不可或缺的一部分。尤其是对于大学生这一群体,他们通常生活在学校周边的大学城,拥有丰富的就餐选......
  • 前端Vue篇之Vue3响应式:Ref和Reactive
    目录Vue3响应式:Ref和ReactiveRef和Reactive概述用途Ref基本用法及在setup()中的使用基本用法在setup()中使用`<scriptsetup>`语法为何使用refReactive基本概念及在模板中的使用基本概念在模板中使用Reactive深层响应式与Ref区别为何使用ReactiveRef和Reactive比较和......
  • Vue项目与组件有关的问题
    记录时间:2024-03-24一、准备工作【使用“文心一言”搜索】vue3项目components文件夹vue内容怎么写提供示例,要求script在前,并且使用scripttssetup语法在Vue3项目中,如果你想要使用<scriptsetup>语法和TypeScript来编写组件,你可以按照以下示例来组织你的.vue文件。<scripts......
  • Vue项目,推荐与组件有关的问题
    记录时间:2024-03-24第一组:在Vue项目中,与组件相关的问题涵盖了许多方面,从组件的设计、创建、通信、性能优化到错误处理。以下是一些推荐的与Vue组件有关的问题,可以帮助你更好地理解和使用Vue组件:组件设计原则:如何设计可重用和可维护的Vue组件?组件的粒度应该如何控制?是应该创......
  • 基于SpringBoot+Vue的付费自习室管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • 基于SpringBoot+Vue的单位考勤系统的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • Vue项目与文件夹有关的问题
    记录时间:2024-03-24一、准备工作【使用“文心一言”搜索】vue3项目components和views文件夹分别放什么文件在Vue3项目中,components和views文件夹各自有不同的用途和存放内容。components文件夹:主要用于存放非路由组件和全局组件。这些组件是应用程序中的可重用组件,可以......
  • vue2安装常见组件、配置、使用
    一、网络请求【axios】1、安装:[email protected]、全局注册main.js中//导入axiosimportaxiosfrom"axios";//配置请求后端路径=IP:端口号/apiaxios.defaults.url='http://127.0.0.1:8888/';//将axios设置为Vue的原型属性,这样在组件中就可以通过......
  • 前端学习-vue视频学习012-路由
    尚硅谷视频教程路由简介路由就是一组key-value的对应关系多个路由,需要经过路由器的管理怎样才能使用路由器安装路由器npmivue-router在src内新增文件夹router在router文件夹新增文件index.ts,在其中创建路由器并暴露出去//创建一个路由并暴露出去//引入createR......
  • 基于SpringBoot+Vue医疗管理系统设计和实现(源码+LW+部署讲解)
    博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌主要内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs......