码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-04-01 16:58:40      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:pac   文本   方式   一个   标签   logs   模板   无效   log   

<p>{{contentTitle}}</p>
 
data() {
  return {
    contentTitle: `第一行
    第二行`,
  }
},
 
contentTitle这个变量赋的值是,ES6的字符模板
根据说明,在这个字符模板内换行,会直接输出换行,不需要添加什么\n,<br>这类东西。
 
但渲染出来的文本根本没有换行,是这样的:
第一行 第二行
(换行符显示为一个空格)
 
之后查了一下资料说是要用,v-html进行数据的渲染
<p v-html="contentTitle"></p>
但事实是,依然无效
 
最后看了这个博文
 
使用了CCS的属性:white-space
将p容器的white-space属性设置为pre-wrap即可解决问题。
 
查看了一下这个属性发现是:规定段落中的文本换行
那么之前换行变为空格,这时设置为pre就没问题了
(pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。)
 

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

标签:pac   文本   方式   一个   标签   logs   模板   无效   log   

原文地址:https://www.cnblogs.com/yinblog/p/10637294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!