Vue指令v-html
目录
- 一、Vue中的v-html指令是什么？
- 二、v-html指令与v-text指令的区别？
一、Vue中的v-html指令是什么？
v-html指令的作用是：设置元素的innerHTML，内容中有html结构会被解析为标签。
二、v-html指令与v-text指令的区别？
v-text指令是无论内容是什么都只会将其解析为文本，解析文本使用v-text和v-html的效果一样，但当需要解析html结构时要使用v-html。
1、案例源代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="appid"><!-- 解析文本使用v-text和v-html的效果一样，但当需要解析html结构时要使用v-html。 -->1、解析文本示例<p v-text = "school"></p> <p v-html = "school"></p> <br>2、解析html结构示例<p v-text = "href"></p> <p v-html = "href"></p> </div><script>var app = new Vue({el: '#appid',data: {school: "振华中学",href: "<a href='https://blog.csdn.net/blbyu/article/details/145413252'>CSDN-Vue简介</a>"}})</script>
</body></html>
2、代码执行效果如下：
