【Vue】常用指令之v-html

Vue.jpeg

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

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

---

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 官方文档：http://vuejs.org/v2/guide/syntax.html

Vue 中文文档: https://cn.vuejs.org/v2/guide/syntax.html

5. 写在后面

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

• CSDN
• 掘金
• 简书

🌹 喜欢就点个赞吧👍🌹

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

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