Vue v-html指令

Vue v-html教程

Vue v-html 指令类似于 v-text 指令。

Vue v-html 指令与 v-text 指令唯一不同在于，v-text 指令将数据解析为纯文本，不能输出真正的 html 而 v-html 指令是可以解析 html 的。

案例

Vue v-html指令输出HTML

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-html指令</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ msg }}</p>
		<p v-text="msg"></p>
		<p v-html="msg"></p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'<h1>Vue v-html指令使用</h1>'
		}
	})
</script>
</html>

浏览器运行后，效果如下图所示：

07 vue vhtml.png

我们可以看到，使用 “Mustache” 语法和 v-text指令的元素，都被原样输出了，没有解析其中的 HTML 元素。而使用 Vue v-html 指令的元素中的 HTML 元素被正常解析为了 HTML。

Vue v-html指令总结

Vue v-html 指令与 v-text 指令唯一不同在于，v-text 指令将数据解析为纯文本，而 v-html 指令是可以解析 html 的。

Vue v-html 指令应尽量避免使用，否则会带来危险(XSS攻击跨站脚本攻击)。