【Vue】常用指令之v-html

425 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

📝【Vue】学习养成记,【程序员必备小知识】

📔 今日小知识——Vue常用指令之v-html                        

目录                     

1.v-html该怎么使用呢???

2.普通文本:

3.html结构:

4.总结:


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

1. v-html该怎么使用呢???

我们先在被vue实例挂载的标签div中,放入一个p标签,在p标签内部写入v-html指令,<p v-html="name"></p> ,那么name的值是从哪里来的呢?

这就需要我们在data中去定义了,对于一般的普通的文本和使用v-text指令是基本没有什么差异的,但是对于是html的结构就不一样了,它就会被解析出来,如下举例代码所示:

2. 普通文本

代码演示示例

3. html结构

代码演示示例

4. 总结

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

Vue 官方文档:vuejs.org/v2/guide/sy…

Vue 中文文档: cn.vuejs.org/v2/guide/sy…

5. 写在后面

关注我,更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹

🌹欢迎大家留言交流,批评指正,转发请注明出处,谢谢支持!🌹