Vue基础20 换行的处理

Vue中的数据使用{{}}插值插入DOM中，如果数据中含有标签或者换行符\n时，是无法正常被解析为HTML标签的，而是解析为纯文字的

要想正常换行有一下几个解决方法：

v-html

使用v-html会将数据内容作为HTML标签插入到DOM中，这时候就可以用
来代替\n进行换行，这个时候就可以换行成功了

white-space

使用v-html要注意防范XSS攻击，我们也可以直接使用CSS属性来实现换行：

将容器的white-sapce属性设置为pre-wrap就可以了，注意，如果设置为pre和使用

标签效果是一样的，它虽然会正常换行了，但是它们式中会保留HTML标签。
 
  
如果一定需要动态插入HTML标签，那么还是需要使用v-html
 
  
innerHTML和innerText
 
  
设置一个节点的innerHTML和innerText都会保留\n，但是区别是innerHTML会插入HTM标签，innerText则会以字符串的形式显示HTML标签
 
  
document.querySelector('test').innerText = '123\n\r45
6'
// 123
//
// 45
6

document.querySelector('test').innerHtml = '123\n\r45
6'
// 123 45
// 6
 
  
Vue中使用{{}}差值与这两种方式都是不同的，猜测可能是它对\n有特殊的处理
 
  
参考
 
  
 
   
插值@Vue
 
   
white-space@MDN