vue的v-text和v-html处理转义

在vue中将数据填充进模板，最常用的方法应该是{{ name }}这样插值，但是有时候向后端请求到的数据中有转义字符，此时页面就会直接显示转义字符，而不是先转义再显示。

这是因为，{{ name }}插值类似于textContent赋值，textContent赋值输出的是text/plain文本内容，它是不会被浏览器转义的。

要想被浏览器转义，可以使用v-html，v-html类似于innerHTML，innerHTML赋值输出的是text/htmlhtml内容，它在显示之前会先被浏览器转义

终上，关于vue里面数据填充的几种方法总结

• 文本内容(不被转义)
  • {{ name }}
  • v-text
• HTML内容(转义)
  • 元素里面直接插值

    ©

  • v-html

    
    
    image.png

参考链接:
MDN innerHTML, MDN textContent, v-text, v-html
nodeValue vs innerHTML and textContent. How to choose?