理論知識
- v-html可向元素中插入html片段，例如 '< h1>標題一< /h1>'等
- 該指令存在安全漏洞，因此在本地代碼中可以使用，如果要調用第三方的代碼中包含該指令，則存在安全隱患。
- 該指令的值可以同vue對象的data屬性中變量綁定。
實踐
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-html='msg1'></div>//獲取data中變量的值
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
msg1:'<h1>124</h1>'//是html片段
}
})
</script>
</body>
</html>
總結
- 指令的本質是vue作者自定義的網頁標簽屬性。因此他的位置是在標簽的左尖括號內部。