【Vue】指令之v-html

4,511 阅读1分钟
【Vue】学习笔记——Vue常用指令之v-html

v-html指令其实就是是设置innerHTML的作用

1. v-html 和 v-text 区别

通过如下实例代码验证:

image.png

结论: 无论是v-html还是v-text,如果绑定了data中属性之后,会覆盖掉原本标签上的内容。

image.png

结论: 如果绑定了带有标签的属性之后,会被解析出来,同样也会覆盖掉原本标签上的内容。

2. 总结

  • v-html 指令的作用:设置元素的innerHTML
  • 内容中有html结构会被解析为标签。
  • v-text指令无论内容是什么,只会解析为文本
  • 解析文本使用v-text,需要解析html结构使用v-html 

关于v-html 官方文档