Vue v-html 指令
https://www.bilibili.com/video/BV12J411m7MG/?p=8
设置标签的 innerHTML
<div id="app">
<p v-html="content"></p>
</div>
var app = new Vue({
el:"#app",
data:{
content:"<a href='#'>hello world</a>"
}
})
对于普通文本，v-html 和 v-text 没有区别，但对于 HTML 标签就会被 v-html 解析出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-html 指令</title>
</head>
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
<p v-html="tagContent"></p>
<p v-text="tagContent"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//创建 Vue 实例
var app = new Vue({
el:"#app",
data:{
content:"hello world",
tagContent:"<a href='http://www.baidu.com/'>百度</a>"
}
})
</script>
</body>
</html>
总结
- v-html 指令的作用是：设置元素的 innerHTML
- 内容中有 html 结构会被解析为标签
- v-text 指令无论内容是什么，只会解析为文本