Vue基础20 换行的处理

发表于 分类于 阅读次数：

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

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

v-html

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

white-space

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

将容器的white-sapce属性设置为pre-wrap就可以了，注意，如果设置为pre和使用<pre>标签效果是一样的，它虽然会正常换行了，但是它们式中会保留HTML标签。

如果一定需要动态插入HTML标签，那么还是需要使用v-html

innerHTML和innerText

设置一个节点的innerHTML和innerText都会保留\n，但是区别是innerHTML会插入HTM标签，innerText则会以字符串的形式显示HTML标签

1
2
3
4
5
6
7
8
document.querySelector('test').innerText = '<em>123\n\r45<br />6</em>'
// <em>123
//
// 45<br />6</em>

document.querySelector('test').innerHtml = '<em>123\n\r45<br />6</em>'
// 123 45
// 6

Vue中使用双大括号差值与这两种方式都是不同的，猜测可能是它对\n有特殊的处理

参考